Elementui编辑表格使当前行变成input

具体代码如下：

<template>
  <el-main>
    <el-tag>点击编辑使表格内容变成input并修改内容</el-tag>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
  
    >
      <el-table-column prop="id" label="ID" v-if="false"></el-table-column>

      <el-table-column prop="date" label="日期">
        <template slot-scope="scope">
          <!-- scope.$index为当前行下标，cellIndex所点击行下标 -->
          <el-input
            v-model="scope.row.date"
            clearable
            v-show="scope.$index == cellIndex"
          ></el-input>
          <p v-show="scope.$index != cellIndex">{{ scope.row.date }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            clearable
            v-show="scope.$index == cellIndex"
          ></el-input>
          <p v-show="scope.$index != cellIndex">{{ scope.row.name }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.address"
            clearable
            v-show="scope.$index == cellIndex"
          ></el-input>
          <p v-show="scope.$index != cellIndex">{{ scope.row.address }}</p>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="editTable(scope)"
            size="small"
            type="primary"
            v-if="scope.$index != cellIndex"
            >编辑</el-button
          >
          <el-button
            @click="saveTable(scope)"
            size="small"
            type="primary"
            v-else
            >保存</el-button
          >
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "崔小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "刘小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "李小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      //当前点击行的下标
      cellIndex: null
    };
  },

  methods: {
    // 编辑操作
    editTable({ $index }) {
      // 获取当前点击行下标
      this.cellIndex = $index;
    },
    // 保存操作
    saveTable({ row }) {
      console.log(row);
      this.cellIndex = null;
    },

  }
};
</script>

<style lang="scss" scoped>
</style>