实现行内编辑核心思路

1.1 给每一个数据对象, 增加一个额外的boolean属性, 用来区分当前数据是否被点了编辑

res.data.data
    //循环
    循环(let obj of res.data.data){
        obj.clickedit = false//是否点击了编辑
    }
    //先加字段,在赋值!!! 不然新属性不响应!!!
    this.xxx = res.data.data

实例:

//获取数据，渲染到页面上
    async getData() {
      let res = await cateList({
        currentPage: this.page,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.map((v) => ({ ...v, flag: true })); //给原来的数组中添加一个标杆,用来判断数据点击时的状态
      this.total = res.data.total;
      // console.log(res);
    },

1.2 在表格中,要变化的元素节点上, 预埋2个元素(两个元素永远只会显示1个)

<span v-show="数据对象.clickedit == false">默认</span>   //默认显示它
<el-input v-show="数据对象.clickedit"/> //为true显示它

实例:

 <el-table-column label="账号">
  <template slot-scope="obj">
     <span v-show="!obj.row.clickedit">{{ obj.row.account }}</span>
     <el-input v-show="obj.row.clickedit" v-model="obj.row.account" />
   </template>
</el-table-column>

<el-table-column width="120" label="用户组" prop="userGroup">
    <template slot-scope="obj">
        <span v-show="!obj.row.clickedit">{{ obj.row.userGroup }}</span>
         <el-select v-show="obj.row.clickedit" v-model="obj.row.userGroup">
              <el-option label="超级管理员" value="超级管理员" />
              <el-option label="普通管理员" value="普通管理员" />
         </el-select>
     </template>
</el-table-column>

1.3 给编辑按钮绑定点击事件
<编辑按钮 @click=" 数据对象.clickedit = true">
{{ 数据对象.clickedit ? '完成' : '编辑' }}
</编辑按钮>
按钮上的操作:

 <el-table-column label="操作">
    <template slot-scope="obj">
      <el-button @click="obj.row.clickedit = !obj.row.clickedit">{{
         obj.row.clickedit ? '完成' : '编辑'
          }}</el-button>
       <el-button type="danger" @click="remove(obj.row)">删除</el-button>
     </template>
</el-table-column>