element table动态添加form内容，并且每次只选择一行

个人记录，方便查阅，

<template>
  <section class="add-work">
    <div class="title">
      <label>新增项目：</label><span>{{ data.label }}</span>
    </div>
    <el-form
      :model="model"
      ref="tableForm"
      :rules="model.rules"
      class="demo-ruleForm"
    >
      <el-table
        :data="model.tableData"
        border
        style="width: 100%"
        ref="tableData"
        @selection-change="handleCurrentChange"
      >
        <el-table-column type="selection" align="center" width="50px" />
        <el-table-column
          prop="lightOption"
          label="光照条件"
          align="center"
          min-width="40px"
          show-overflow-tooltip
        >
          <template slot-scope="{ row, $index }">
            <el-form-item
              :prop="`tableData.${$index}.light`"
              v-if="tabChoseIndex === $index"
              :rules="[
                {
                  required: true,
                  type: 'string',
                  min: 1,
                  message: '请选择光照条件',
                  trigger: 'change',
                },
              ]"
            >
              <el-select v-model="row.light" placeholder="请选择">
                <el-option
                  v-for="item in row.lightOption"
                  :key="item.lightValue"
                  :label="item.lightStatus"
                  :value="item.lightStatus"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <span v-if="tabChoseIndex !== $index">{{ row.light }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="road"
          label="路面状况"
          min-width="40px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row, $index }">
            <el-form-item
              :prop="`tableData.${$index}.road`"
              v-if="tabChoseIndex === $index"
              :rules="[
                {
                  required: true,
                  type: 'string',
                  min: 1,
                  message: '请选择路面状况',
                  trigger: 'change',
                },
              ]"
            >
              <el-select v-model="row.road" placeholder="请选择">
                <el-option
                  v-for="item in row.roadOption"
                  :key="item.lightValue"
                  :label="item.roadStatus"
                  :value="item.roadStatus"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <span v-if="tabChoseIndex !== $index">{{ row.road }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="speed"
          label="限速"
          min-width="40px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row, $index }">
            <el-form-item
              :prop="`tableData.${$index}.speed`"
              v-if="tabChoseIndex === $index"
              :rules="[
                {
                  required: true,
                  message: '请选择限速区域',
                  trigger: 'change',
                },
              ]"
            >
              <el-select v-model="row.speed" placeholder="请选择">
                <el-option
                  v-for="item in row.speedOption"
                  :key="item.lightValue"
                  :label="item.speedStatus"
                  :value="item.speedStatus"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <span v-if="tabChoseIndex !== $index">{{ row.speed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="40px" align="center">
          <template slot-scope="{ row, $index }">
            <el-button
              type="primary"
              @click="addTable(row)"
              v-if="tabChoseIndex === $index"
              >添加</el-button
            >
            <el-button
              type="primary"
              @click="deleteTable($index)"
              v-if="tabChoseIndex !== $index"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </section>
</template>

<script src="./add-work.js"></script>

add-work.js

export default {
  name: "add-work",
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      model: {
        tableData: [
          {
            lightOption: [
              {
                lightStatus: "白天", // 光照状态
              },
              {
                lightStatus: "黑夜", // 光照状态
              },
            ],
            light: "", // 光照值
            roadOption: [
              {
                roadStatus: "干燥路面",
              },
              {
                roadStatus: "湿滑路面",
              },
            ], // 路面下拉框
            road: "", // 路面选择
            speedOption: [{ speedStatus: "60km/h" }, { speedStatus: "80km/h" }], // 限速下拉
            speed: "", // 限速值
          },
        ],
        rules: {},
      },
      tabChoseIndex: 0, // tab选择的下标
    };
  },
  created() {
    // table 选择框先选择第一个
    setTimeout(() => {
      this.$refs.tableData.toggleRowSelection(
        this.model.tableData[this.tabChoseIndex],
        true
      );
    }, 0);
  },
  methods: {
    // table 选择框只选择最后一个
    handleCurrentChange(selection) {
      if (selection.length > 1) {
        // 直接修改 table 选择 把第一个选择的设置为fals
        this.$refs.tableData.toggleRowSelection(selection[0], false);
        // 把当前选中 index 进行改变
        this.tabChoseIndex = this.model.tableData.findIndex(
          (item) => item.light === selection[1].light
        );
      }
    },
    // 新增数据
    addTable() {
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          this.model.tableData.push({
            lightOption: [
              {
                lightStatus: "白天", // 光照状态
              },
              {
                lightStatus: "黑夜", // 光照状态
              },
            ],
            light: "", // 光照值
            roadOption: [
              {
                roadStatus: "干燥路面",
              },
              {
                roadStatus: "湿滑路面",
              },
            ], // 路面下拉框
            road: "", // 路面选择
            speedOption: [{ speedStatus: "60km/h" }, { speedStatus: "80km/h" }], // 限速下拉
            speed: "", // 限速值
          });
          this.tabChoseIndex = this.model.tableData.length - 1;
          this.$refs.tableData.toggleRowSelection(
            this.model.tableData[this.tabChoseIndex],
            true
          ); // 选择最后一个
        }
      });
    },
    // 删除数据
    deleteTable(index) {
      this.model.tableData.splice(index, 1);
      this.tabChoseIndex = this.model.tableData.length - 1; // 删除的时候 重新定位到最后一个编辑的
    },
    // dialog 的回调方法
    dialogConfirmButton(callback) {
      // 验证 数据是否存在 并且 要校验最后一个数据是否有值
      if (
        this.model.tableData[0].light ||
        this.model.tableData[0].road ||
        this.model.tableData[0].speed
      ) {
        let index = this.model.tableData.length - 1;
        if (
          this.model.tableData[index].light === "" ||
          this.model.tableData[index].road === "" ||
          this.model.tableData[index].speed === ""
        ) {
          this.model.tableData.splice(index, 1);
        }
        console.log(this.model.tableData);
        // 请求后台数据 在返回callback
        callback({
          res: "我是返回",
        });
      } else {
        this.$$messageWarning("项目内容为空！");
      }
    },
  },
};