接上一篇 ”vue + element 表格以及表单数据动态绑定 -- 表格数据动态绑定“ ，下来我们来讲讲 ”表单数据动态绑定”

动态表单渲染

 

//触发弹窗按钮
<el-button
        type="success"
        size="small"
        @click="add">
        添加
</el-button>
//弹窗 
<el-dialog title="新增" :visible.sync="dataflag">
      <el-form :model="{domains}">
        <el-form-item 
            v-for="domain in domains" 
            :label="domain.name" 
            :key="domain.key" 
            :label-width="formLabelWidth"
            style="position: relative">
          <span class="p_required" style="">*</span>
          <el-input v-model="domain.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dataflag = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
</el-dialog>

相比于表格数据来说，表单数据动态渲染就简单多了，下面我们来分析一下代码：

表格是否弹出 - :visible.sync="dataflag"

双向数据绑定 - 以防数据状态变化，视图未发生相应的改变，其中的参数，在此为 Boolean

在上图代码中需要注意 三点：

a. :model = "{ domains }" 

domains 数据格式如下图：

[{
//唯一的key值，用于绑定数据
    "key" : "name",
//用于表单的前缀
    "label" : "姓名",
//表单中填写的数据
    "value" : ""
},{
    "key" : "age",
    "label" : "年龄",
    "value" : ""
}]

b. :label="domain.name"  

绑定 - 表单前缀的展示
c. :key="domain.key"

绑定 - 表单填写的数据

 

！！！申明：这仅仅是针对部分数据格式的渲染方式，仅供大家参考，整体都是这个思路，不喜勿喷哈

欢迎关注我的公众号：码上学习鸭