Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件

在Web应用开发中，经常需要提供表格数据的编辑功能。本文将介绍如何使用Vue 3结合Element Plus库来实现一个支持单列控制编辑功能的表格，并通过封装组件的形式提高代码的复用性。通过本教程，你将学会如何构建一个具备单列控制编辑功能的表格组件，并在表单提交时保存更改。

目标

实现一个基本的表格，其中包含日期、名称和描述等列。
表格中的每一项都可以在点击编辑图标后进入编辑模式。
编辑模式下可以修改表格单元格的内容。
编辑完成后，可以通过失去焦点的方式提交更改。
支持单列控制编辑，即可以单独控制每一列表格单元格的编辑状态。
封装成可复用的组件，便于在其他项目中使用。

创建表格组件

我们将创建一个主组件App.vue和一个子组件EditableCell.vue来实现表格的编辑功能。

主组件 `App.vue`

<template><div class="table-layout"><el-table :data="tableData"><el-table-column type="index" label="序号" width="60" /><el-table-column prop="id" label="ID" width="80" /><el-table-column prop="date" label="日期"><template #default="scope"><EditableCell:cell-data="scope.row.date":is-editing="scope.row.isEditDate":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column><el-table-column prop="name" label="名称"><template #default="scope"><EditableCell:cell-data="scope.row.name":is-editing="scope.row.isEditName":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column><el-table-column prop="description" label="描述"><template #default="scope"><EditableCell:cell-data="scope.row.description":is-editing="scope.row.isEditDescription":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column></el-table></div></template><script setup>import { ref } from 'vue';import EditableCell from './EditableCell.vue'; // 确保路径正确import { ElTable, ElTableColumn, ElInput, ElIcon } from 'element-plus';import { Edit } from '@element-plus/icons-vue';// 优化后的tableDataconst tableData = ref([{id: 1,date: '2024-08-01',name: '项目A',description: '这是一个关于项目A的描述',isEditDate: false,isEditName: false,isEditDescription: false},{id: 2,date: '2024-08-15',name: '项目B',description: '这是一个关于项目B的描述',isEditDate: false,isEditName: false,isEditDescription: false},{id: 3,date: '2024-09-01',name: '项目C',description: '这是一个关于项目C的描述',isEditDate: false,isEditName: false,isEditDescription: false}]);function toggleEdit(column, row) {if (column && row) {const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;row[editKey] = !row[editKey];}}function applyChanges(newValue, column, row) {if (column && row) {row[column] = newValue;const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;row[editKey] = false;}}</script><style scoped>.table-layout {width: 60%;margin: 60px auto;}.edit-icon {margin: 10px 0 0 10px;}</style>

子组件 `EditableCell.vue`

1<template>
2  <div>
3    <span v-if="!isEditing">{{ displayData }}</span>
4    <el-input
5      v-else
6      v-model="displayData"
7      style="width: 120px;"
8      @blur="onBlur"
9    />
10    <el-icon color="#409EFF" class="edit-icon" @click="onToggleEdit">
11      <Edit />
12    </el-icon>
13  </div>
14</template>
15
16<script>
17export default {
18  name: 'EditableCell',
19  props: ['cellData', 'isEditing', 'column', 'row'], // 添加row属性
20  emits: ['toggleEdit', 'applyChanges'],
21  data() {
22    return {
23      displayData: this.cellData
24    };
25  },
26  watch: {
27    cellData(newVal) {
28      this.displayData = newVal;
29    }
30  },
31  methods: {
32    onToggleEdit() {
33      this.$emit('toggleEdit', this.column, this.row); // 传递column和row
34    },
35    onBlur() {
36      this.$emit('applyChanges', this.displayData, this.column, this.row); // 传递column和row
37    }
38  }
39}
40</script>
41
42<style scoped>
43.edit-icon {
44  margin: 10px 0 0 10px;
45}
46</style>

说明

子组件 (EditableCell.vue):
- 使用内部状态displayData来存储编辑时的值，并通过watch确保它与cellData同步。
- 在模板中，根据编辑状态显示不同的内容。
- 在onBlur方法中提交更改，并正确调用applyChanges方法。
父组件 (App.vue):
- 在模板中，通过scope.column.property获取列的属性名称，并将其传递给子组件。
- 在模板中，通过scope.row将行数据传递给子组件。
- 在toggleEdit方法中，通过构造的editKey来切换编辑状态。
- 在applyChanges方法中，通过构造的editKey来更新编辑状态，并保存新值。