Vue+ElementUI实现表单动态渲染、可视化配置的方法

动态渲染就是有一个异步的数据，大概长这样：

rush:js;"> { "inline": true,"labelPosition": "right","labelWidth": "","size": "small","statusIcon": true,"formItemList": [ { "type": "input","label": "姓名","disable": false,"readonly": false,"value": "","placeholder": "请输入姓名","rules": [],"key": "name","subtype": "text" },{ "type": "radio","label": "性别","button": false,"border": true,"key": "gender","options": [ { "value": "1","label": "男","disabled": false },{ "value": "0","label": "女","disabled": false } ] } ] }

然后你需要把这个json渲染成这样：

最后提交表单的数据长这样：

rush:js;"> { "name": "Genji","gender": "1" }

然后我们目标就是封装这样一个组件：

rush:js;">

实现

开始之前，你需要知道 v-model 的工作原理 ：

rush:js;">

这不过是以下示例的语法糖：

rush:js;">

了解这些后，我们再来一步一步实现这个组件。

首先，把配置转发到 el-form ：

rush:js;">

第二步，设置默认值。

因为在每个 form-item 都会需要一个 v-model ，所以在渲染之前，保证每个字段都有值。这里需要注意一点，组件内不要直接修改父组件传入的 prop ，所以我们在这里用 {...this.value} 快速拷贝一份，最后别忘了通知父组件。代码如下：

{ if (formData[key] === undefined || formData[key] === null) { formData[key] = value } }) this.$emit('input',formData) } },mounted() { this.setDefaultValue() },}

第三步，渲染 form-item 。

如何把下面的数据渲染为我们熟悉的 el-form-item ？

rush:js;"> { "type": "input","subtype": "text" }

第一种，利用 vue 内置的 component 组件，写起来可能像这样：

rush:js;">

第二种，使用 v-if 逐个判断：

rush:js;"> 未知控件类型

考虑到每种表单控件的处理逻辑千差万别，楼主采用了第二种方式。

根据这个思路，我们来封装一个 dynamic-form-item ，接收一个 item ，渲染一个 el-form-item ：

rush:js;">

tips: 使用 v-bind="$attrs" v-on="$listeners" 可以方便地转发父组件的 v-model 指令，详见vue高阶组件。

最后，我们就可以循环输出一个完整的表单了：

rush:js;">

这里不能用 v-model="value[item.key]" ，上文说了，组件内不能直接修改props，所以这里我们还是转发一下。

rush:js;"> methods: { handleInput(val,key) { // 这里element-ui没有上报event，直接就是value了 this.$emit('input',{ ...this.value,[key]: val }) },setDefaultValue() {...} },

完整代码地址：src/components/dynamic-form/form.vue

扩展功能

1.数字显示单位，限制小数位数

element-ui 没有做这个功能，不过我觉得还是挺常见的，所以使用 el-input 手动封装了一个 input-number :

rush:js;"> disabled="item.disabled">

完整代码： src/components/dynamic-form/input-number.vue

2.异步验证

得益于 async-validator ，我们可以很方便地自定义验证规则。

在配置中

rush:js;"> { "type": "input",... "rules":[ { "sql": "SELECT {key} FROM balabala","message": "xx已被占用","trigger": "blur" } ] }

在 dynamic-form-item 组件中,遍历 item.rules,将sql验证转化为自定义 validator 函数:

rush:js;">

3.省市区快捷配置

感谢 element-china-area-data 的作者。

在配置中:

rush:js;"> { "type": "cascader",... "areaShortcut": "provinceAndCityData" }

在 dynamic-form-item 组件中:

rush:js;">

4.从远程加载选项

包括但不限于 radio 、 checkBox 、 cascader 、 select

在配置中:

rush:js;"> { "type": "checkBox",... "optionsUrl": "/api/some/options" }

在 dynamic-form-item 组件中:

rush:js;">

总结

以上所述是小编给大家介绍的Vue+ElementUI实现表单动态渲染、可视化配置的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。