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';
  
  // 优化后的tableData
  const 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>

说明

1. 子组件 (EditableCell.vue):

   • 使用内部状态displayData来存储编辑时的值，并通过watch确保它与cellData同步。
   • 在模板中，根据编辑状态显示不同的内容。
   • 在onBlur方法中提交更改，并正确调用applyChanges方法。

2. 父组件 (App.vue):

   • 在模板中，通过scope.column.property获取列的属性名称，并将其传递给子组件。
   • 在模板中，通过scope.row将行数据传递给子组件。
   • 在toggleEdit方法中，通过构造的editKey来切换编辑状态。
   • 在applyChanges方法中，通过构造的editKey来更新编辑状态，并保存新值。

通过这种方式，我们实现了表格的编辑功能，并确保了编辑状态下数据的正确提交。

总结

本文介绍了如何使用Vue 3和Element Plus实现一个带有编辑功能的表格。通过本文的步骤，你可以轻松地在自己的项目中实现类似的表格编辑功能。希望这篇教程对你有所帮助！