vue在表格中创建多个三级联动并实现增加、删除行

效果如下：

其中区块、一级、二级、是属于三级联动，计划量、计划开始时间、计划结束时间是三级联动的数据，不能修改

后面的变更开始、结束时间可以修改，但做了限制，结束时间不能在开始时间之前

 

HTML代码：

<div>
    <div style="padding-bottom:10px">
      <el-button type="primary" @click="insertEvent(-1)">插入一行</el-button>
      <el-button type="primary" @click="removeCheckboxRow">删除选中</el-button>
    </div>

    <el-table ref="myTable" border :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="区块所属" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.firstValue" @change="oneSelectChange(scope, $event)" placeholder="请选择">
            <el-option
              v-for="item in optionsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="一级区块">
        <template slot-scope="scope">
          <el-select v-model="scope.row.secondValue" @change="twoSelectChange(scope, $event)" placeholder="请选择">
            <el-option
              v-for="item in scope.row.optionsOneList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="二级区块">
        <!-- optionsTwoList -->
        <template slot-scope="scope">
          <el-select v-model="scope.row.VFPBlock" @change="threeSelectChange(scope, $event)" placeholder="请选择">
            <el-option
              v-for="item in scope.row.optionsTwoList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.changeQuantity" :disabled="true" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划开始时间">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.plannedStartTime"
            readonly
            type="date">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划结束时间">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.plannedEndTime"
            readonly
            type="date">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="变更开始时间">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.changeStartTime"
            type="date"
            value-format="yyyy-MM-dd"
            @change="dateChangeEvent($event, scope.row)"
            placeholder="选择日期">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" label="变更结束时间">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.changeEndTime"
            type="date"
            value-format="yyyy-MM-dd"
            @change="dateChangeEvent($event, scope.row)"
            placeholder="选择日期">
          </el-date-picker>
        </template>
      </el-table-column>
    </el-table>
  </div>

 

js代码：

data() {
    return {
      tableData: [],
      optionsList: [
        {
			"amount":45000.0,
			"children":[
				{
					"amount":20126.0,
					"children":[
						{
							"amount":914.0,
							"children":[],
							"label":"B区地下",
							"planEnd":"2020-05-04 00:00:00",
							"planStart":"2020-04-20 00:00:00",
							"value":1395
						},
						{
							"amount":1505.0,
							"children":[],
							"label":"B区夹层",
							"planEnd":"2020-06-11 00:00:00",
							"planStart":"2020-04-01 00:00:00",
							"value":1399
						},
					],
					"label":"B展厅",
					"planEnd":"2020-07-27 00:00:00",
					"planStart":"2020-04-01 00:00:00",
					"value":1391
				},
				{
					"amount":24161.0,
					"children":[
						{
							"amount":788.0,
							"children":[],
							"label":"A1地下结构",
							"planEnd":"2020-04-15 00:00:00",
							"planStart":"2020-04-04 00:00:00",
							"value":1431
						},
						{
							"amount":782.0,
							"children":[],
							"label":"A2地下结构",
							"planEnd":"2020-04-15 00:00:00",
							"planStart":"2020-04-04 00:00:00",
							"value":1435
						},
					],
					"label":"A展厅",
					"planEnd":"2020-07-30 00:00:00",
					"planStart":"2020-04-04 00:00:00",
					"value":1427
				},
				{
					"amount":671.0,
					"children":[
						{
							"amount":671.0,
							"children":[],
							"label":"登陆厅地下结构",
							"planEnd":"2020-04-15 00:00:00",
							"planStart":"2020-04-05 00:00:00",
							"value":1463
						}
					],
					"label":"登陆厅",
					"planEnd":"2020-04-15 00:00:00",
					"planStart":"2020-04-05 00:00:00",
					"value":1459
				}
			],
			"label":"详图设计",
			"planEnd":"2020-07-30 00:00:00",
			"planStart":"2020-04-01 00:00:00",
			"value":42
		},
		{
			"amount":45000.0,
			"children":[
				{
					"amount":20126.0,
					"children":[
						{
							"amount":914.0,
							"children":[],
							"label":"B区地下",
							"planEnd":"2020-06-21 00:00:00",
							"planStart":"2020-05-11 00:00:00",
							"value":1396
						},
						{
							"amount":1505.0,
							"children":[],
							"label":"B区夹层",
							"planEnd":"2020-08-07 00:00:00",
							"planStart":"2020-06-18 00:00:00",
							"value":1400
						}
					],
					"label":"B展厅",
					"planEnd":"2020-09-23 00:00:00",
					"planStart":"2020-05-11 00:00:00",
					"value":1392
				},
				{
					"amount":24161.0,
					"children":[
						{
							"amount":788.0,
							"children":[],
							"label":"A1地下结构",
							"planEnd":"2020-05-24 00:00:00",
							"planStart":"2020-04-16 00:00:00",
							"value":1432
						},
						{
							"amount":782.0,
							"children":[],
							"label":"A2地下结构",
							"planEnd":"2020-05-22 00:00:00",
							"planStart":"2020-04-16 00:00:00",
							"value":1436
						}
					],
					"label":"A展厅",
					"planEnd":"2020-08-10 00:00:00",
					"planStart":"2020-04-16 00:00:00",
					"value":1428
				},
				{
					"amount":671.0,
					"children":[
						{
							"amount":671.0,
							"children":[],
							"label":"登陆厅地下结构",
							"planEnd":"2020-05-20 00:00:00",
							"planStart":"2020-04-16 00:00:00",
							"value":1464
						}
					],
					"label":"登陆厅",
					"planEnd":"2020-05-20 00:00:00",
					"planStart":"2020-04-16 00:00:00",
					"value":1460
				}
			],
			"label":"物资管理",
			"planEnd":"2020-09-23 00:00:00",
			"planStart":"2020-04-16 00:00:00",
			"value":43
		}],
      optionsOneList: [],
      optionsTwoList: [],
      optionsTherrList: {},
      multipleSelection: [],
    };
  },

  methods: {
    // 区块触发
    oneSelectChange(e,data){
      if (data) {
        let item = this.optionsList.find(item => item.value == data)
        if (item) {
          this.tableData[e.$index].optionsOneList = item.children
          this.tableData[e.$index].secondValue =''
        }
      }
    },
    // 一级触发
    twoSelectChange(e,data){
      if (data) {
        let item = this.tableData[e.$index].optionsOneList.find(item => item.value == data)
        if (item) {
          this.tableData[e.$index].optionsTwoList = item.children
          this.tableData[e.$index].VFPBlock =''
        }
      }
    },
    // 二级触发
    threeSelectChange(e,data){
      if (data) {
        let item = this.tableData[e.$index].optionsTwoList.find(item => item.value == data)
        if (item) {
          this.tableData[e.$index].optionsTherrList = item
          this.tableData[e.$index].plannedStartTime = item.planStart
          this.tableData[e.$index].plannedEndTime = item.planEnd
          this.tableData[e.$index].changeStartTime = item.planStart
          this.tableData[e.$index].changeEndTime = item.planEnd
          this.tableData[e.$index].changeQuantity = item.amount
        }
      }
    },
    // 删除复选框选中的数据
    removeCheckboxRow(){ 
      for (var i = 0; i < this.multipleSelection.length; i++) {
        for (var j = 0; j < this.tableData.length; j++) {
          if(this.multipleSelection[i].index == this.tableData[j].index) {  
            this.tableData.splice(j, 1)
          }
        }
      } 
    },
    // 复选框选中数据
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    // 插入一行时调用
    insertEvent (data ={}, i='') {
      let record = { 
        index: data.coId || new Date().getTime(),
        firstValue: data.firstValue || '', 
        secondValue: data.secondValue || '', 
        VFPBlock: data.thirdValue || '', 
        changeQuantity: data.afterAmount || '',
        plannedStartTime: data.beforeStart || '', 
        changeStartTime: data.afterStart || '', 
        plannedEndTime: data.beforeEnd || '', 
        changeEndTime: data.afterEnd || ''
        }
        this.tableData.push(record)
        if(this.isEdit) {
          this.selectChange(data, i)
        }
    },
    // 但有数据时回赋值
    selectChange(data, i){
      if (data.firstValue) {
        let item = this.optionsList.find(item => item.value == data.firstValue)
        if (item) {
          this.tableData[i].optionsOneList = item.children
          if (data.secondValue) {
            let items = item.children.find(items => items.value == data.secondValue)
            if (items) {
              this.tableData[i].optionsTwoList = items.children
              if (data.thirdValue) {
                let itemss = items.children.find(itemss => itemss.value == data.thirdValue)
                if (itemss) {
                  this.tableData[i].optionsTherrList = itemss
                  this.tableData[i].plannedStartTime = itemss.planStart
                  this.tableData[i].plannedEndTime = itemss.planEnd
                  this.tableData[i].changeQuantity = itemss.amount
                }
              }
            }
          }
        }
      }
    },
    // 判断时间是否符合
    dateChangeEvent(e, data){
      let startdate = data.changeStartTime;
      let enddate = data.changeEndTime;
      let start = new Date(Date.parse(startdate.replace(/-/g, "/")));
      let end = new Date(Date.parse(enddate.replace(/-/g, "/")));
      if (start > end) {
          this.$message({ message: '变更结束时间不能在变更开始时间之前',type: 'warning'});
      }
    },
  },

 

css代码：

.el-table >>> tr td .cell {
    display: flex;
  }