vue实现动态添加，编辑，删除

需求：
1.点击添加一行动态添加行，如果上一次的添加没有保存则不能进行下次添加
2.点击编辑span标签变为input可编辑
3.点击保存验证字段，验证通过变为span

思路：
1.给每一列增加一个自定义字段，如果字段存在，则为input，不存在则为span
html部分代码，省略了部分字段

  <el-row class="row">
            <el-col :span="24">
              <el-table
                size="mini"
                :data="ruleForm.columnList"
                style="width: 100%"
                highlight-current-row
              >
                <el-table-column prop="name" label="名称" align="center">
                  <template slot-scope="scope">//可拿到当前行的数据
                    <span v-if="scope.row.isSet">
                      <el-input
                        v-model="scope.row.name"
                        size="mini"
                        :placeholder="$t('please enter')"
                      >
                      </el-input>
                    </span>
                    <span v-else>{{ scope.row.name }} </span>
                  </template>
                </el-table-column>
                 <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <span
                      @click.stop="saveRow(scope.row, scope.$index)"
                    >
                      保存
                    </span>
                    <span
                      @click="editRow(scope.row, scope.$index)"
                    >
                      编辑
                    </span>
                    <span
                     @click="deleteRow(scope.$index, ruleForm.columnList, scope.row)"
                    >
                      删除
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <div
                class="el-table-add-row"
                style="width: 99.2%"
                @click="addRow()"
              >
                <span>+ 添加</span>
              </div>
            </el-col>
          </el-row>      

js部分代码

this.$set(obj, key, value)/vue.set(obj, key, value)
强制更新，因为我们在对象中添加了自定义属性，虽然对象身上已经有了该属性，但是视图层并没有更新该数据，vue不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化
解决方法
使用this.set或者object.assign即可解决

//data部分
data() {
    return {
      ruleForm: {
        columnList: [],
        name: "",
      },
   // 添加
    addRow() {
      for (const i of this.ruleForm.columnList) {
        if (i.isSet) {//如果isSet存在证明当前状态为input，点击添加无效，点击保存变为span才能继续添加
          return;
        }
      }
      const obj= {name: ""};//自定义一个对象，内容为列表对应的字段
      obj["isSet"] = true; //往obj里面增加isSet判断标识
      this.ruleForm.columnList.push({ ...data });//push空字段到列表中，就形成了添加一行的效果
    },
    // 保存
    saveRow(row, index) {
      // row.isSet = false;
      if (row.name) {//如果当前行的姓名存在，改变isSet为false，input就变为了span
        row.isSet = false;
      } else {
        this.$message({//如果为空，弹出message
          type: "error",
          message: "字段名称，字段类型不能为空",
        });
      }
      this.$set(row, "update", "强制更新");//强制更新，解释写在了上面
    },
    // 编辑
    editRow(row) {
      if (row.isSet) {//如果isSet判断标识存在，证明当前为input，也就是上一次的结果还未保存，需要保存变为span，才可以编辑
        this.$message({
          type: "warning",
          message: "请保存当前编辑项",
        });
        return;
      }
      row.isSet = true;//点击编辑变为input
    },
    // 删除
    deleteRow(index, rows, row) {
      rows.splice(index, 1);
    },

style部分代码

 .row {
    margin-left: 30px;
    .el-input {
      width: 100px;
    }
    .el-table-add-row {
      margin-top: 10px;
      width: 100%;
      height: 34px;
      border: 1px dashed #c1c1cd;
      border-radius: 3px;
      cursor: pointer;
      justify-content: center;
      display: flex;
      line-height: 34px;
    }
  }