vue3.0 el-table 行内点击图标 修改该条数据某个值

需求：点击el-table 中的单个状态旁边小图标可以进行修改该条数据的状态：原型图如下

点击编辑图标，可以进行如下图操作：

实现逻辑：

获取表格数据时，我们可以给其一个标志位，以此来展示改初始时为不可编辑状态，只有点击按钮才能显示选择框以及取消保存按钮，我们可以通过该条数据的 index row? 的改变来达到我们的目的，修改该条数据。

代码如下：

?//初始时赋值标志位显示不可编辑状态
?res.data.rows.forEach(function(val, index) {
? ? ? ? val.index = index;
? ? ? ? val.edit = true;
? ?});

? <el-table-column
? ? ? property="状态"
? ? ? label="状态"
? ? ? min-width="180px"
? ? ? align="center"
? ? >
? ? ? <template #default="scope">
? ? ? ? <span v-if="scope.row.edit === false">
? ? ? ? ? <el-row>
? ? ? ? ? ? <el-col :span="14" style="padding-left:0px;padding-right:0px">
? ? ? ? ? ? ? <el-select
? ? ? ? ? ? ? ? v-model="scope.row.auditStatus"
? ? ? ? ? ? ? ? placeholder="请选择..."
? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? v-for="item in options"
? ? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? ? :value="item.value"
? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? </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: -3px;"
? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? </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: -3px;margin-left: 5px;"
? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? </span>
? ? ? ? ? ? </el-col>
? ? ? ? ? </el-row>
? ? ? ? </span>
? ? ? ? <span
? ? ? ? ? class="spanan"
? ? ? ? ? v-if="scope.row.edit === true"
? ? ? ? ? @click="changeOn(scope.row.index)"
? ? ? ? >
? ? ? ? ? {{ scope.row.auditStatus }}
? ? ? ? ? <Edit
? ? ? ? ? ?style="marginleft:10px;color:#4F8AFF;width:16px;height:16px;cursor:pointer;margin-bottom:?
? ? ? ? ? ?-3px;"
? ? ? ? ? />
? ? ? ? </span>
? ? ? </template>
? ? </el-table-column>

// 取消

const changeOff = (index, row) => {
? data.tableData[index].edit = true;
? ElMessage({
? ? showClose: true,
? ? type: 'info',
? ? message: '取消操作 !',
? });
};

// 打开
const changeShow = i => {

//该步是为了让我们每次只能打开一项
? data.tableData.forEach(item => {
? ? item.edit = true;
? });
? data.tableData[i].edit = false;
};

//保存

const changeSave = async (index, row) => {
? data.tableData[index].edit = true;
}