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

在 vue3 中使用 element-plus 实现表格数据更改功能，可以通过以下步骤实现：

1. 导入 element-plus 的 Table、Form 和 Input 组件，并在组件中引入表格数据：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column>
        <template #default="{row}">
          <el-button @click="editRow(row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="Name" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="Age" prop="age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
        <el-form-item label="Address" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submitForm">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
  },
  setup() {
    const tableData = ref([
      {
        name: 'John',
        age: 30,
        address: 'New York',
      },
      {
        name: 'Jane',
        age: 25,
        address: 'San Francisco',
      },
      {
        name: 'Bob',
        age: 40,
        address: 'Dallas',
      },
    ]);

    const form = ref({});
    const dialogVisible = ref(false);

    const rules = {
      name: [
        { required: true, message: 'Please input name', trigger: 'blur' },
      ],
      age: [
        { required: true, message: 'Please input age', trigger: 'blur' },
        { type: 'number', message: 'Age must be a number', trigger: 'blur' },
      ],
      address: [
        { required: true, message: 'Please input address', trigger: 'blur' },
      ],
    };

    const editRow = (row) => {
      form.value = { ...row };
      dialogVisible.value = true;
    };

    const submitForm = () => {
      const formRef = this.$refs.form;
      formRef.validate((valid) => {
        if (valid) {
          const dataIndex = tableData.value.indexOf(form.value);
          const tableDataCopy = [...tableData.value];
          tableDataCopy.splice(dataIndex, 1, form.value);
          tableData.value = tableDataCopy;
          dialogVisible.value = false;
        }
      });
    };

    return {
      tableData,
      form,
      dialogVisible,
      rules,
      editRow,
      submitForm,
    };
  },
};
</script>

1. 在表格中添加一个“编辑”按钮，点击该按钮会弹出一个对话框，用于修改表格行的数据。

2. 在对话框中添加一个表单，用于输入修改后的数据。

3. 在对话框的“保存”按钮上绑定一个 submitForm 方法，用于提交表单数据。在 submitForm 方法中，可以先对输入的数据进行验证，如果验证通过，则将修改后的数据更新到表格中，同时关闭对话框。

以上就是使用 element-plus 实现表格数据更改功能的全部步骤。