一、需求说明：
vue+elementUI表格里嵌套表单：
支持动态增加一行和删除一行含checkbox复选框，联级下拉框。不同的活动名称，所对应的活动选项下拉框的值不同针对不同的选项，值的表现形式也要发生对应的变化，如：日期形式时，值要从文本框变为日期选择框。字典形式就变为下拉框
二、效果图：
三、实现
（一）Dom代码：
<el-card ><div slot="header" ><div style="display: inline;"><el-button type="info" @click="resetDataList">清空</el-button><el-button type="warning" @click="handleDataAdd">新增一行</el-button></div><el-button style="float: right;" type="primary" @click="handleDataSave">保存</el-button></div><!-- 条件表格 --><div><el-table:data="dataList"style="width: 100%"highlight-current-row><el-table-column label="序号" width="55" type="index"></el-table-column><el-table-column label="亲子活动" width="100"><template slot-scope="scope"><el-checkbox v-model="scope.row.亲子活动"></el-checkbox></template></el-table-column><el-table-column label="活动名称" width="280"><template slot-scope="scope"><el-select v-model="scope.row.活动名称" placeholder="请选择"filterable clearable @change="nameChange(scope.row.活动名称, scope.$index)"><el-option v-for="item in queryFields" :label="item.key" :value="item.key"></el-option></el-select></template></el-table-column><el-table-column label="活动选项" width="170"><template slot-scope="scope"><el-select v-model="scope.row.活动选项" placeholder="请选择" clearable><el-optionv-for="item in scope.row.conditionOptions":label="item" :value="item"></el-option></el-select></template></el-table-column><el-table-column label="值" width="250"><template slot-scope="scope"><!-- 通过v-if、v-if-else、v-else来控制值的表现形式是文本框、日期选择框、下拉框的一种 --><el-date-picker v-if="scope.row.isDate" v-model="scope.row.值" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker><el-select v-else-if="scope.row.isDict" v-model="scope.row.值" placeholder="请输入内容" clearable filterable allow-create default-first-option><el-optionv-for="item in scope.row.valueOptions":key = "item.value" :label="item.label" :value="item.value"></el-option></el-select><el-input v-else v-model="scope.row.值" placeholder="请输入内容" clearable></el-input></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="danger"@click="handleDataDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></el-card>
（二）Js代码：
data：
data() {return {//活动名称queryFileds:[{key:'烘焙', conditionType:'condition4'},{key:'野餐', conditionType:'condition3'},{key:'插花', conditionType:'condition1', isDate: true},{key:'棋牌', conditionType:'condition1', isDate: true},{key:'麻将', conditionType:'condition4'},{key:'游泳', conditionType:'condition3'},{key:'马术', conditionType:'condition2'},],//不同的活动类型的值conditions_options: {'condition1': ['日期'],'condition2': ['日期', '场地'],'condition3': ['场地', '参与人员'],'condition4': ['场地', '参与人员', '说明']},//数据列表dataList: [{亲子活动: false,活动名称: '',活动选项: '',值: '',//是否是字典类型isDict: false,//是否是日期类型isDate: false,//对应的活动选项下拉框的数据conditionOptions: [],//对应的值下拉框的数据valueOptions: []}],};},
methods:
//清空条件列表resetDataList() {this.dataList=[{亲子活动: false,活动名称: '',活动选项: '',值: '',isDict: false,isDate: false,conditionOptions: [],valueOptions: []}];this.sortName = '';this.sortValue = '';},//删除一行handleDataDelete(index, row) {this.dataList.splice(index,1);},//插入一行handleDataAdd(){if (this.dataList == undefined) {this.dataList = [];}let obj = {};obj.亲子活动 = false;obj.活动名称 = '';obj.活动选项 = '';obj.值 = '';obj.isDict = false;obj.isDate = false;obj.conditionOptions = [];obj.valueOptions = [];this.dataList.push(obj);},//活动名称选择变化，相应的活动选项、值跟着发生变化nameChange(fieldName, index){this.dataList[index].conditionOptions = [];this.dataList[index].valueOptions = [];this.getConditionAndValue(fieldName, index);this.dataList[index].活动选项 = '';this.dataList[index].值 = '';},getConditionAndValue(fieldName, index){for(var i=0 ; i<this.queryFields.length ; i++){if(this.queryFields[i].key == fieldName){//赋值活动类型this.dataList[index].conditionOptions = this.conditions_options[this.queryFields[i].conditionType];//把字典类型的字段的值变成下拉框if(this.queryFields[i].isDict!=undefined && this.queryFields[i].isDict!=null){this.dataList[index].isDict = true;//这一步根据自己的业务需求来，总之返回一个对象列表，然后赋值给this.dataList[index].valueOptionsthis.dataList[index].valueOptions = null;}else{this.dataList[index].isDict = false;}//把日期类型的字段的值变成日期选择框this.dataList[index].isDate = this.queryFields[i].isDate ? true : false;break;}}}
四、说明and踩过的坑
1、整个表格的数据其实就是一个对象列表，里面每一个对象其实就是一行的数据
2、新增一行和删除是通过 “ 增加 / 删除dataList的元素 ” 来实现
3、复选框v-model的值要用false或true
4、联级下拉框，用到的思想是：给每一行数据都配上一个option，不同行的option不一样，使用el-option时v-for="item in scope.row.conditionOptions"
