elementui可视化设计_Vue+ElementUI实现表单动态渲染、可视化配置的方法

发布时间：2019-01-07 整理：编程之家

编程之家收集整理的这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随编程之家小编过来看看吧！

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

然后你需要把这个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