这篇文章主要介绍了vue+elementui实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
动态渲染就是有一个异步的数据，大概长这样：
{ "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": "性别", "value": "", "button": false, "border": true, "rules": [], "key": "gender", "options": [ { "value": "1", "label": "男", "disabled": false }, { "value": "0", "label": "女", "disabled": false } ] } ]}
登录后复制
然后你需要把这个json渲染成这样：
最后提交表单的数据长这样：
{ "name": "Genji", "gender": "1"}
登录后复制
然后我们目标就是封装这样一个组件：
立即学习“前端免费学习笔记（深入）”；
登录后复制
实现
开始之前，你需要知道 v-model 的工作原理 ：
登录后复制登录后复制
这不过是以下示例的语法糖：
登录后复制登录后复制
了解这些后，我们再来一步一步实现这个组件。
首先，把配置转发到 el-form ：
export default { props: { formConfig: { type: Object, required: true }, value: { type: Object, required: true } },}
登录后复制
第二步，设置默认值。
因为在每个 form-item 都会需要一个 v-model ，所以在渲染之前，保证每个字段都有值。这里需要注意一点，组件内不要直接修改父组件传入的 prop ，所以我们在这里用 {…this.value} 快速拷贝一份，最后别忘了通知父组件。代码如下：
export default { props: { formConfig: {...}, value: {...}, }, methods: { setDefaultValue() { const formData = { ...this.value } // 设置默认值 this.formConfig.formItemList.forEach(({ key, value }) => { if (formData[key] === undefined || formData[key] === null) { formData[key] = value } }) this.$emit('input', formData) } }, mounted() { this.setDefaultValue() },}
登录后复制
第三步，渲染 form-item 。
如何把下面的数据渲染为我们熟悉的 el-form-item ？
{ "type": "input", "label": "姓名", "disable": false, "readonly": false, "value": "", "placeholder": "请输入姓名", "rules": [], "key": "name", "subtype": "text"}
登录后复制
第一种，利用 vue 内置的 component 组件，写起来可能像这样：
登录后复制
第二种，使用 v-if 逐个判断：
未知控件类型
登录后复制
考虑到每种表单控件的处理逻辑千差万别，楼主采用了第二种方式。
根据这个思路，我们来封装一个 dynamic-form-item ，接收一个 item ，渲染一个 el-form-item ：
... 未知控件类型 export default { props: { item: { type: Object, required: true } }}
登录后复制
tips: 使用 v-bind=”$attrs” v-on=”$listeners” 可以方便地转发父组件的 v-model 指令，详见vue高阶组件。
最后，我们就可以循环输出一个完整的表单了：
登录后复制
这里不能用 v-model=”value[item.key]” ，上文说了，组件内不能直接修改props，所以这里我们还是转发一下。
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 :
登录后复制
完整代码： src/components/dynamic-form/input-number.vue
2.异步验证
得益于 async-validator ，我们可以很方便地自定义验证规则。
在配置中
{ "type": "input", ... "rules":[ { "sql": "SELECT {key} FROM balabala", "message": "xx已被占用", "trigger": "blur" } ]}
登录后复制
在 dynamic-form-item 组件中, 遍历 item.rules , 将sql验证转化为自定义 validator 函数:
... import request from '@/utils/request'export default { props: { item: {...} }, computed: { Rules() { const rules = this.item.rules if (rules === undefined) return undefined const R = [] rules.forEach(rule => { if (rule.sql) { const validator = (rule2, value, callback) => { // 根据项目自行修改 request('/api/validate', 'POST', { key: rule2.field, value, sql: rule.sql.replace(/{key}/ig, rule2.field) }) .then(res => { callback(!res || undefined) }) .catch(err => { this.$message.error(err.message) callback(false) }) } R.push({ validator, message: rule.message, trigger: 'blur' }) } else { R.push(rule) } }) return R } },}
登录后复制
3.省市区快捷配置
感谢 element-china-area-data 的作者。
在配置中:
{ "type": "cascader", ... "areaShortcut": "provinceAndCityData"}
登录后复制
在 dynamic-form-item 组件中:
...
登录后复制
4.从远程加载选项
包括但不限于 radio 、 checkbox 、 cascader 、 select
在配置中:
{ "type": "checkbox", ... "optionsUrl": "/api/some/options"}
登录后复制
在 dynamic-form-item 组件中:
... import request from '@/utils/request'export default { props: { item: {...} }, computed: {...}, data() { return { ajaxOptions: [] } }, created() { const { optionsUrl, key, type } = this.item if (optionsUrl) { // 根据项目自行修改 request(`${optionsUrl}?key=${key}`, 'GET') .then(res => { this.ajaxOptions = res }) .catch(err => { this.$message.error(err.message) }) } }}
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
nodejs实现连接mongodb数据库的方法示例
iview中Select 选择器多选校验方法
用Axios Element实现全局的请求loading的方法
以上就是Vue+ElementUI实现表单动态渲染、可视化配置的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752598.html
