【vue3】可编辑el-table

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="field_name"
        label="检查字段名称"
        width="180">
      <template #default="{row,$index}">
        <input type="text" v-model="row.field_name" v-show="row.display" />
        <span v-show="!row.display">{{row.field_name}}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="expected_type"
        label="期望类型"
        width="100">
      <template #default="{row,$index}">
        <input type="text" v-model="row.expected_type" v-show="row.display" />
        <span v-show="!row.display">{{row.expected_type}}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="expected_value"
        label="期望值"
        width="150">
      <template #default="{row,$index}">
        <input type="text" v-model="row.expected_value" v-show="row.display" />
        <span v-show="!row.display">{{row.expected_value}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template #default="{row,$index}">
        <el-button type="warning" @click="edit(row)">编辑</el-button>
        <el-button type="danger"  @click="save(row)">保存</el-button>
        <el-button type="danger"  @click="del(row,$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="top-box">
    <el-button style type="primary" size="small" @click="add()">添加行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        field_name: 'code',
        expected_type: 'String',
        expected_value: '0'
      },]
    }
  },
  methods: {
    edit(row, index) {
      row.display = true;
    },
    save(row, index) {
      row.display = false;
    },
    add() {
      this.tableData.push({
        field_name: '',
        expected_type: '',
        expected_value: ''
      });
    },
    del(row, index) {
      this.tableData.splice(index, 1);
    }
  }
}
</script>