由于项目需求  需要表格的内容可以进行修改

思路：当点击修改的时候切换到input输入框，否则就是文本

如图:

先定义一个变量用来控制span和input的显示隐藏，由于点击编辑只修改当行数据，所以用index索引来控制

代码如下：

<template>
  <div class="Sidebar">
    <el-table :data="tableData">
      <el-table-column align="center" header-align="center" label="姓名" width="180">
        <template slot-scope="{row,$index}">
          <span v-if="!showEdit[$index]">{{row.name}}</span>
          <el-input type="text" v-model="showName[$index]" v-else placeholder="请输入姓名"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="年龄" width="180">
        <template slot-scope="{row,$index}">
          <span v-if="!showEdit[$index]">{{row.age}}</span>
          <el-input type="text" v-model="showAge[$index]" v-else placeholder="请输入年龄"></el-input>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" width="200" label="操作">
        <template slot-scope="{row,$index}">
          <el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)" type="primary">
            <i class="el-icon-edit"></i>修改
          </el-button>
          <el-button v-if="showEdit[$index]" @click="submit($index,row)" type="success">确定</el-button>
          <el-button v-if="showEdit[$index]" @click="cancelUpdate($index)" type="warning">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //控制修改显示隐藏
      showEdit: [],
      showName: [], //显示姓名
      showAge: [], //显示年龄
      name: "",
      age: "",
      tableData: [
        {
          id: "12987122",
          name: "荔枝吖吖",
          age: 18
        },
        {
          id: "12987123",
          name: "啊哈",
          age: 19
        }
      ]
    };
  },
  methods: {
    //点击修改
    showUpdate(index) {
      this.showEdit[index] = true;
      this.$set(this.showEdit, index, true); //这里要用$set方法，否则页面状态不更新
    },
    //取消修改
    cancelUpdate(index) {
      this.$confirm("取消修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$set(this.showEdit, index, false);
          this.$set(this.showName, index, "");
          this.$set(this.showAge, index, "");
        })
        .catch(() => {});
    },
    //提交修改
    submit(index, row) {
      //发送请求，隐藏输入框
      this.axios({
        url: 'XXXXXXX',
        method: "GET",
        params: {
          id: row.id,
          name: this.showName[index],
          age:this.showAge[index]
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$set(this.showEdit, index, false);
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

还有一种情况就是你点击编辑的时候 ，并不是空的输入框，是需要带回显数据的，这种操作相对简单一些，直接修改对应的tableData数据即可如图：

只需要改input里的model就这块可以了

 <el-input type="text" v-model="row.name" v-else placeholder="请输入姓名"></el-input>
 <el-input type="text" v-model="row.age" v-else placeholder="请输入年龄"></el-input>

提交数据这块就不需要更改什么了 直接打印（this.tableData）就可以在控制台上查看数据变化

像后台提交数据这块直接根据index索引来提交对应的，修改params这块就好了

     params: {
          id: row.id,
          name: this.tableData[index].name,
          age:this.tableData[index].age
        }