小白快看！一个Vue3 + Element Plus封装公共表格组件！

2023-03-24 07:26:55

Vue3 + Element Plus 打造通用表格组件：提升效率，简化开发

简介

在 Vue3 项目中，表格组件是数据展示的必备利器。Element Plus 提供了功能强大的表格组件，但随着项目中列表数据的不断增多，重复的代码可能会成为开发的瓶颈。本文将介绍如何封装一个通用表格组件，通过参数配置实现不同列表数据的灵活展示，从而提升开发效率和代码可维护性。

封装步骤

1. 安装 Element Plus

npm install element-plus -S

2. 创建公共表格组件

创建组件文件，如 Table.vue：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column :prop="prop" :label="label" v-for="item in columns" :key="item.prop">
      <template v-if="item.slot">
        <template #default="scope">{{ scope.row[item.prop] }}</template>
      </template>
      <template v-else>{{ item.formatter ? item.formatter(scope.row) : scope.row[item.prop] }}</template>
    </el-table-column>
  </el-table>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const tableData = ref(props.tableData)
    const columns = ref(props.columns)

    return {
      tableData,
      columns
    }
  }
})
</script>

3. 组件使用

在需要使用表格的组件中，引入 Table 组件并配置参数：

<template>
  <Table :tableData="tableData" :columns="columns" />
</template>

<script>
import Table from './Table.vue'

export default defineComponent({
  components: { Table },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 30 },
        { name: '王五', age: 40 }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    }
  }
})
</script>

组件特性

自定义表头： 通过配置 columns 参数，指定表头的文本标签。
支持插槽： 使用 <template #default>...</template> 定义插槽，实现自定义单元格内容。
自定义样式： 可通过 style 属性设置表格的整体样式。
工具提示： 通过 <el-table-column> 的 tooltip-effect 属性启用工具提示。
自定义单元格： 利用 formatter 属性，可实现对单元格内容的自定义处理。

封装优势

避免重复代码： 封装后，无论数据如何变化，表格展示逻辑只定义一次，避免了重复代码的编写。
提高开发效率： 减少了手写表格的代码量，提升了开发效率。
易于维护： 集中管理表格逻辑，降低了后期维护的难度。

常见问题解答

如何添加分页功能？
- 使用 Element Plus 的 <el-pagination> 组件，并将其与表格组件集成。
如何实现数据排序？
- 设置 <el-table-column> 的 sortable 属性为 true，并通过 sort-prop 指定排序的字段。
如何添加编辑功能？
- 使用 <el-table-column> 的 edit-render 和 edit-format 属性，实现单元格的编辑和格式化。
如何对特定列隐藏或显示？
- 使用 <el-table-column> 的 show-overflow-tooltip 和 visible 属性控制列的显示状态。
如何获取表格中的选中行数据？
- 使用 <el-table> 的 selection-change 事件，获取选中的数据。