Element+Vue实现动态表单(多个下拉框组件)

需求

表单的内容为巡检计划，巡检计划可以选择多个巡检点位，每个巡检点位可以选择多个设备和对应操作。

最终效果图

• 点击加号图标增加一个下拉框
• 减号图标删除对应下拉框
• 下拉框备选项目相同
• 点击设置动作按钮，弹出可编辑表格，可以为该巡检点位设置多个动作
• 表格每行内容可编
• 设别名称下拉框和设备动作下拉框联动
• 操作按钮可对选项进行上下排序

代码实现

1. 定义表单结构

<el-dialog:title="dialogTitle":visible.sync="addDialogOpen"width="650px"><divclass="dialogForm"><el-form:rules="rules":model="addForm"ref="addForm"label-width="80px">    
        精简了无关代码
       <el-form-itemlabel="巡检内容"prop="patrolContent"><divclass="patrol-content"><divclass="point">
           patrolContent元素个数控制下拉框的个数
           循环渲染
           每个div中包含一个下拉框、三个按钮
             <divclass="point-item"v-for="(item,index) in addForm.patrolContent":key="index"><divclass="point-select"><el-selectv-model="item.point"class="selectItem"placeholder="请选择巡检点位(先选择地图)"><el-optionv-for="(item,index) in pointOptions":key="index":label="item.point_name":value="item.point_name"></el-option></el-select><el-buttonsize="mini"icon="el-icon-circle-plus"type="primary"@click="addPointSelectItem(index)"/><el-buttonsize="mini"icon="el-icon-remove"type="info"@click="removePointSelectItem(index)"/><el-buttonsize="mini"type="success"@click="addDeviceAction(index)">设置动作
                 </el-button></div></div></div></div></el-form-item></el-form></div></el-dialog>

1. 在data()中定义需要绑定的模板变量

addForm:{patrolContent:[//有多少个元素就渲染多少个下拉框{point:'',//点位children:[],//对应每个点位的具体动作}]}

1. 定义增减下拉框的方法，实现动态增减

// 增加一个巡检点下拉框addPointSelectItem(index){this.addForm.patrolContent.splice(index +1,0,{point:'',children:[]//为空表示该点还未设置动作})},// 删除一个巡检点下拉框removePointSelectItem(index){if(this.addForm.patrolContent.length >1){this.addForm.patrolContent.splice(index,1)}},

至此，已经实现了下拉框的动态增减，且下拉框的选项之间互不影响。
接下来继续实现每个点位可以配置不同的动作。

1. 定义打开动作弹窗的函数

这里在打开弹窗时，首先获取到所点击的下拉框索引值index，index代表了该元素在patrolContent中的位置，通过index获取表格要绑定的变量（该元素中的children）。

// 在该点位添加动作:打开弹窗addDeviceAction(index){this.dialogTableData =this.addForm.patrolContent[index].children
  this.deviceDialogOpen =true}

1. 定义动作弹窗

在弹窗打开时，表格会根据children中的元素进行渲染。
表格借助

v-if

实现了编辑和确认编辑逻辑。
实现表格项的增删较为简单，增删children列表中的元素即可。

<el-dialogtitle="选择动作":visible.sync="deviceDialogOpen"width="800px"><divclass="device-dialog"><el-table:data="dialogTableData"border><el-table-columnalign="center"label="序号"type="index"width="50"/><el-table-columnalign="center"label="设备名称"prop="device"><templatev-slot="scope"><el-selectv-show="scope.row.edit"v-model="scope.row.device"class="selectItem"placeholder="选择设备"@change="deviceSelectChange"><el-optionvalue="机械臂"label="机械臂"/><el-optionvalue="升降台"label="升降台"/><el-optionvalue="摄像头"label="摄像头"/></el-select><spanv-show="!scope.row.edit">
            {{ scope.row.device }}
          </span></template></el-table-column><el-table-columnalign="center"label="设备动作"prop="action"><templatev-slot="scope"><el-selectv-show="scope.row.edit"value-key="id"v-model="scope.row.action"class="selectItem"placeholder="选择动作"><el-optionv-for="item in actionOptions":key="item.label":value="item.value":label="item.label"></el-option></el-select><spanv-show="!scope.row.edit">
            {{ scope.row.action['action_name'] }}
          </span></template></el-table-column><el-table-columnalign="center"label="操作"width="300"><templatev-slot="scope"><el-buttonsize="mini"type="primary"v-show="!scope.row.edit"@click="editAction(scope.row)">编辑
          </el-button><el-buttonsize="mini"type="success"v-show="scope.row.edit"@click="scope.row.edit=!scope.row.edit">
            确定
          </el-button><el-buttonsize="mini"type="danger"@click="delAction(scope.$index)">删除</el-button><el-buttonsize="mini"type="primary"plain@click="upMoveItem(scope.$index)"icon="el-icon-caret-top"></el-button><el-buttonsize="mini"type="warning"plain@click="downMoveItem(scope.$index)"icon="el-icon-caret-bottom"></el-button></template></el-table-column></el-table><divclass="footer"><el-buttontype="warning"@click="addAction">添加</el-button><el-buttontype="primary"@click="deviceDialogOpen=false">确定</el-button></div></div></el-dialog>

1. 实现表格项增减方法以及排序方法

// 弹窗-表格中增加一条数据addAction(){this.dialogTableData.push({device:'',//绑定设备选项action:'',//绑定设备动作选项edit:true,// 默认可编辑})},// 弹窗-删除表格中的一条数据delAction(index){this.dialogTableData.splice(index,1)},// 上移元素upMoveItem(index){let table =this.dialogTableData
  if(index !==0){
    table[index]= table.splice(index -1,1, table[index])[0]}else{
    table.push(table.shift())}},// 下移元素downMoveItem(index){let table =this.dialogTableData
  if(index !== table.length -1){
    table[index]= table.splice(index +1,1, table[index])[0];}else{
    table.unshift(table.splice(index,1)[0]);}},

总结

• 需要明确嵌套层级，vue组件要绑定到正确的变量上
• 为某个选项增加具体动作时，要获取到索引，这样才能根据索引获取该选项下的数据
• 选项的增删和排序都利用了splice()函数