首页 > 建站教程 > 前端框架 >  form-create-designer实现表单关联数据库表,组件关联字段值正文

form-create-designer实现表单关联数据库表,组件关联字段值

我爱模板网在使用form-create-designer做表单设计器时,由一个需求:选择表单设置时,里面要能选择此表单关联的数据库表,是个下拉框,能展示接口返回的所有数据表。选择某个组件(如输入框),能够在组件配置的下拉框选择对应的字段名。

效果如下:





而实际上关联数据库,form-create-designer并没有提供相应的接口方法。组件关联字段名,也只是提供了一个手动输入的input框,不符合需求。只能改造了。肯定不能直接在node_modules里面直接改。

1、将node_modules/@form-create真个拷贝到项目的src/components目录下,将@form-create更名为form-create


拷贝前


拷贝后

2、在main.js修改引入地址:
//import FcDesigner from "@form-create/designer'  // 原来的引入方式
import FcDesigner from './components/form-create/designer' // 现在的引入方式
Vue.use(FcDesigner)

3、此时,打开 src/components/form-create/designer/package.json,找到
"main": "./dist/index.min.js",
"module": "./dist/index.min.js",

改为
"main": "./src/index.js",
"module": "./src/index.js",

否则的话,会导致修改无效。因为组件引入的是打包后的地址。

4、通过 src/components/form-create/designer/src/components/FcDesigner.vue文件,我们可以找到
import form from '../config/base/form';
这是表单配置的选项,在里面增加一段代码:



代码:
{
    type: "select',
    field: 'formInDatabase',
    value: '1',
    title: '关联数据表',
    options: [
        {value: '1', label: '数据表1'},
        {value: '2', label: '数据表2'},
        {value: '3', label: '数据表3'},
    ]
}

接着找到
import form from '../config/base/field';
这是组件配置选项,打开,在里面修改



{
    type: "select',
    field: 'field',
    value: '',
    title: '字段 ID',
    options: [
        {value: 'name', label: '姓名'},
        {value: 'sex', label: '性别'},
        {value: 'age', label: '年龄'},
    ]
}

当然,上面的options都是写死的,但是既然能改了,那么写成活得也就不难了,这里就不再赘述了。