修改表格内单条数据

VUE2实现效果

点击图标时显示“确定”按钮，点击确定按钮可修改数据。 

1.给表格里需要修改数据的字段添加input框，并定义isEdit是否可见

 2.用this.$set 和this.$delete来控制是否显示

VUE3实现效果：

实现代码：

1.记得在刚开始先赋值

onMounted(() => {

//   getList()

 dataList1.forEach(function(val, index) {

        val.index = index

        val.isEdit = false,

 })

})

2.表格代码：

<el-table-column prop="xing" label="极限分值" width="300" :show-overflow-tooltip="true" >
            <template #default="scope">
             <span v-if = "scope.row.isEdit">
             <el-row>
              <el-col :span="14" style="padding-left:0px;padding-right:0px">
              <el-select
                v-model="scope.row.xing"
                placeholder="请选择..."
              >
                <el-option
                  v-for="item in fenLists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
            <el-col
              :span="6"
              style="padding-left:0px;padding-right:0px;margin-top:2px;"
            >
              <span
                style="color:blue ;cursor:pointer;margin-top:2px;"
                @click="changeSave(scope.row.index, scope.row)"
              >
               <CircleCheck
                  style="color:#4F8AFF ;width:16px;height:16px;cursor:pointer;margin-bottom: -5px;"
                />
              </span>
              <span
                style="color:blue ;cursor:pointer;margin-top:2px;"
                @click="changeOff(scope.row.index, scope.row)"
              >
                <CircleClose  style="color:#4F8AFF ;width:16px;height:16px;cursor:pointer;margin-bottom: -5px;margin-left: 5px;" />
              </span>
            </el-col>
          </el-row>
        </span>
        <span
          class="spanan"
          v-if="!scope.row.isEdit"
          @click="changeOn(scope.row)"
        >
          {{ scope.row.xing }}
          <el-icon>
            <EditPen style="marginleft:15px;color:#4F8AFF;width:16px;height:16px;cursor:pointer;margin-bottom:-5px;" />
          </el-icon>
        </span>
       </template>
            </el-table-column>

3.方法部分：

// 打开
const changeOn = (i: any) => {
      i.isEdit = 'true'
};

//保存
const changeSave = async (index: string | number, row: any) => {
    delete row.isEdit
}

// 取消
const changeOff = (index: any, row: any) => {
  delete row.isEdit
  ElMessage({
    showClose: true,
    type: 'info',
    message: '取消操作 !',
  });
};

具体接口可以在保存方法里写。