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 的工作原理 ：

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

:value="something"

@input="something = $event.target.value">

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

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

class="