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

前端之家收集整理的这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

dio","label": "性别","button": false,"border": true,"key": "gender","options": [ { "value": "1","label": "男","disabled": false },{ "value": "0","label": "女","disabled": false } ] } ] }

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

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

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

实现

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

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

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

首先,把配置转发到 el-form :

第二步,设置默认值。

因为在每个 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 ?

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

第二种,使用 v-if 逐个判断:

未知控件类型

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

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

... 未知控件类型

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

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

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

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

扩展功能

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

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

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

2.异步验证

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

在配置中

sql": "SELECT {key} FROM balabala","message": "xx已被占用","trigger": "blur" } ] }

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

...

3.省市区快捷配置

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

在配置中:

在 dynamic-form-item 组件中:

...

4.从远程加载选项

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

在配置中:

Box",... "optionsUrl": "/api/some/options" }

在 dynamic-form-item 组件中:

...

总结

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

猜你在找的Vue相关文章