vue3 element-plus 实现表格数据更改功能

要实现表格数据更改功能，您需要使用以下步骤：

1. 在您的Vue组件中引入Element Plus表格组件。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
    <el-table-column
      label="Action"
      width="180">
      <template #default="{ row }">
        <el-button @click="handleEdit(row)">Edit</el-button>
        <el-button type="danger" @click="handleDelete(row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const tableData = reactive([
      { name: 'John', age: 25, gender: 'Male' },
      { name: 'Mary', age: 30, gender: 'Female' },
      { name: 'Harry', age: 40, gender: 'Male' },
    ]);

    const handleEdit = (row) => {
      console.log(row);
      // Handle edit functionality here
    };

    const handleDelete = (row) => {
      console.log(row);
      // Handle delete functionality here
    };

    return {
      tableData,
      handleEdit,
      handleDelete,
    };
  },
};
</script>

2. 在表格中添加一个“Action”列，用于触发编辑和删除操作。在“Action”列中，您可以使用Vue插槽来渲染自定义组件。

3. 在您的Vue组件中实现“handleEdit”和“handleDelete”方法。当用户点击编辑或删除按钮时，这些方法将被触发。

4. 在“handleEdit”方法中，您可以获取当前行的数据，并将其传递给编辑组件以显示当前数据。在编辑组件中，您可以使用Vue双向绑定来更新表格数据。

5. 在“handleDelete”方法中，您可以获取当前行的数据并将其从表格数据中删除。