element-plus 编辑table

以下是使用element-plus实现编辑table的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 22, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '广州市天河区' },      ],
      editDialogVisible: false,
      editForm: {
        name: '',
        age: '',
        address: '',
      },
      editIndex: -1,
    };
  },
  methods: {
    handleEdit(row) {
      this.editIndex = this.tableData.indexOf(row);
      this.editForm = Object.assign({}, row);
      this.editDialogVisible = true;
    },
    handleDelete(row) {
      const index = this.tableData.indexOf(row);
      this.tableData.splice(index,1);
    },
    handleSave() {
      this.tableData.splice(this.editIndex, 1, this.editForm);
      this.editDialogVisible = false;
    },
    handleCancel() {
      this.editDialogVisible = false;
    },
  },
};
</script>

在这个示例中，我们使用了element-plus的el-table组件来展示表格数据，并使用了el-dialog组件来实现编辑表格数据的功能。当用户点击编辑按钮时，我们会弹出一个对话框，让用户可以编辑表格数据。当用户点击保存按钮时，我们会将编辑后的数据保存到表格中。