vue+elementUI表格嵌套表单，包含联级下拉框、动态增加行

一、需求说明：

vue+elementUI表格里嵌套表单：

1. 支持动态增加一行和删除一行
2. 含checkbox复选框，联级下拉框。不同的活动名称，所对应的活动选项下拉框的值不同
3. 针对不同的选项，值的表现形式也要发生对应的变化，如：日期形式时，值要从文本框变为日期选择框。字典形式就变为下拉框

二、效果图：

三、实现

（一）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-option
              v-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-option
              v-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].valueOptions
        this.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"