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

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

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

实现逻辑：

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

代码如下：

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

        property="状态"
      label="状态"
      min-width="180px"
      align="center"
    >
     
   

// 取消

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