Vue中怎么利用ElementUI实现表单动态渲染-创新互联
本篇文章为大家展示了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 :
第二步,设置默认值。
因为在每个 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 :
... 未知控件类型
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 函数:
...
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 组件中:
...
上述内容就是Vue中怎么利用ElementUI实现表单动态渲染,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:Vue中怎么利用ElementUI实现表单动态渲染-创新互联
当前地址:http://scyanting.com/article/ceghip.html