本文详细介绍了如何使用Vue和ElementUI实现表单的动态渲染和可视化配置。通过解析JSON数据，创建动态组件并设置默认值，最终生成包含各种表单元素（如input、select等）的表单。同时，文章提到了扩展功能，包括数字显示单位、异步验证、省市区快捷配置和远程加载选项等。提供了完整的组件代码示例。
这篇文章主要介绍了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 的工作原理 ：
这不过是以下示例的语法糖：
:value="something"
@input="something = $event.target.value">
了解这些后，我们再来一步一步实现这个组件。
首先，把配置转发到 el-form ：
class="
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
