el-table中el-select与span 通过点击按钮进行编辑与显示切换；js给数据中的对象添加属性

效果实现：

 

1.点击新增一行 表格插入空白行
2.当表格项有数据时显示模式 操作显示修改和删除
3.点击修改切换成编辑模式（此处是el-select）

代码部分

<div class="addBtn">
        <el-button type="primary" size="mini" @click="add()">新增一行</el-button>
</div>
<el-form :model="form" ref="form" >
        <el-row>
          <el-col :span="24">
            <el-table class="table-cursor" :data="form.tableData" border>
              <el-table-column prop="indicatorName" label="指标名称" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'tableData.' + scope.$index + '.indicatorName'" :rules="{
                      required: true,
                      message: '值不能为空',
                      trigger: 'change',
                    }">
                    <span v-if="scope.row.isEdit">
                      <el-select clearable v-model="scope.row.indicatorName" @change="scope.row.isEdit = true" filterable
                        class="dis-time">
                        <el-option v-for="item in indicatorNameTypeList" :key="item.enumValue" :label="item.enumName"
                          :value="item.enumValue + ''"></el-option>
                      </el-select>
                    </span>
                    <span v-else>{{ scope.row.indicatorName }}</span>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" v-show="scope.row.indicatorName && !scope.row.isEdit" content="编辑"
                    placement="bottom">
                    <el-button type="text" @click="valChange(scope.row, scope.$index, true)">修改</el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" v-show="scope.row.indicatorName && !scope.row.isEdit" content="删除"
                    placement="bottom">
                    <el-button type="text" @click="reduce(scope.$index)">删除</el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" v-show="scope.row.indicatorName && scope.row.isEdit" content="保存"
                    placement="bottom">
                    <el-button type="text" @click="valChange(scope.row, scope.$index, true)">保存</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
</el-form>

data中定义的： 

 form: {
        sel: null,
        tableData: [{
          indicatorName: "年累计流量",
          indicatorCode: '3',
        }]
}

动态给表格数据中添加isEdit属性，用来区别编辑和展示模式切换也是关键所在！（js给数据中的对象添加属性）

 mounted() {
    this.form.tableData.map(i => {
      i.isEdit = false
    })
}

methods中定义的

//增加
    add() {
      for (let i of this.form.tableData) {
        if (i.isEdit) {
          return this.$message({
            type: "warning",
            message: "请先对上一条数据进行保存后再操作"
          });
        }
      }
      let row = {
        indicatorName: "",
        indicatorCode: '',
        isEdit: true
      }
      this.form.tableData.push(row)
      this.form.sel = row
    },
    //删除
    reduce(index) {
      this.form.tableData.splice(index, 1)
      //删除接口
    },
    //保存、编辑
    valChange(row, index, qx) {
      //点击修改，判断是否已经保存所有操作
      for (let i of this.form.tableData) {
        if (i.isEdit && i.indicatorCode != row.indicatorCode) {
          this.$message({
            type: "warning",
            message: "请先对上一条数据进行保存后再操作"
          });
          return false
        }
      }
      //提交数据
      if (row.isEdit) {
        const v = this.form.sel
        // 必填项判断
        if (v.indicatorName == '') {
          this.$message({
            type: "warning",
            message: "请选择指标项"
          });
        } else {
          row.isEdit = false
          //调用保存接口
        }
      } else {
        this.form.sel = row
        row.isEdit = true
      }
    },