【vue3】可编辑el-table

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="date"
        label="日期"
        width="180">
      <template #default="{row,$index}">
        <input type="text" v-model="row.date" v-show="row.display" />
        <span v-show="!row.display">{{row.date}}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{row,$index}">
        <el-button type="warning" @click="edit(row)">编辑</el-button>
        <el-button type="danger" @click="save(row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎'
      }, {
        date: '2016-05-04',
        name: '王小虎'
      }]
    }
  },
  methods: {
    edit(row, index) {
      row.display = true;
    },
    save(row, index) {
      row.display = false;
    }
  }
}
</script>