表格行内的 下拉 添加行 和 删除行

一、DOM

<template v-else-if="eventTypeId === 16">
    <el-form-item style="float: right">
      <el-button type="primary" @click="addCrossing()">添加</el-button>
    </el-form-item>

    <el-form-item label="列表">
      <el-table :data="speedLimitData" style="width: 100%" ref="tb">
        <el-table-column prop="nslUpstreamCrossingId" label="路口">
          <template slot-scope="scope">
            <el-select
              v-model="
                speedLimitData[scope.$index].nslUpstreamCrossingId
              "
              placeholder="请选择"
              @change="
                getDowncrossList(
                  scope.$index,
                  speedLimitData[scope.$index].nslUpstreamCrossingId
                )
              "
            >
              <el-option
                v-for="item in speedLimitData[scope.$index]
                  .upCrossingList"
                :key="item.id"
                :label="item.crossingName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="nslDownstreamCrossingId"
          label="路口"
        >
          <template slot-scope="scope">
            <el-select
              v-model="
                speedLimitData[scope.$index].nslDownstreamCrossingId
              "
              placeholder="请选择"
              @change="
                getUpCrossList(
                  scope.$index,
                  speedLimitData[scope.$index].nslDownstreamCrossingId
                )
              "
            >
              <el-option
                v-for="item in speedLimitData[scope.$index]
                  .downCrossingList"
                :key="item.id"
                :label="item.crossingName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="speed" label="速度">
          <template slot-scope="scope">
            <el-select
              v-model="speedLimitData[scope.$index].nslSpeedLimit"
              placeholder="请选择"
              @change="changeSpeed"
            >
              <el-option
                v-for="(val, key) in speedList"
                :key="key"
                :label="val"
                :value="key"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteCrossing(scope.$index)"
              type="text"
              size="small"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </template>

二、 DATA 声明

 speedLimitData: [],     

三、 各种方法

 // 添加行的方法 
    addCrossing() {
      if (this.speedLimitData.length < 5) {
        this.speedLimitData.push({
          nslUpstreamCrossingId: "",
          nslDownstreamCrossingId: "",
          nslSpeedLimit: "",
          upCrossingList: this.crossingList,
          downCrossingList: this.crossingList,
          rsuList: []
        });
      } else {
        this.$message.warning("最多添加5条信息");
      }
    },
 // 移除的方法
     deleteCrossing(index) {
      this.speedLimitData.splice(index, 1);
      this.RSUTableList = [];
      this.speedLimitData.forEach(item => {
        item.rsuList.forEach(d => {
          this.RSUTableList.push(d);
        });
      });
      this.map.clearMap();
      this.showMapDetail(this.RSUTableList, "img/rsu_map.svg", "rsu");
    },
 // 行内下拉点击事件
   getDowncrossList(index, val) {
      let crossObj = {
        id: val,
        type: 0 //上游路口
      };