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;
}