引言：为什么需要二次封装？

在Vue3+TypeScript的技术栈下，ElementPlus的表格组件虽然功能强大，但在实际后台管理系统开发中仍存在诸多痛点：重复代码多、类型定义繁琐、功能扩展困难、与状态管理耦合度高等。本文将从零开始，基于Vue3组合式API、Vite构建工具、TypeScript严格类型检查、Pinia状态管理和Router4路由，构建一个”完美”的表格二次封装方案。

一、技术栈选型与项目搭建

1.1 为什么选择这个技术组合？

• Vue3：组合式API提供了更好的代码组织方式，TypeScript支持更完善
• Vite：极速的冷启动和热更新，适合现代前端开发
• TypeScript：严格的类型检查减少90%的运行时错误
• Pinia：比Vuex更轻量的状态管理，支持Composition API
• Router4：与Vue3深度集成，提供更灵活的路由方案

1.2 项目初始化

npm create vite@latest my-admin -- --template vue-ts
cd my-admin
npm install element-plus @element-plus/icons-vue pinia vue-router@4

二、表格组件核心设计原则

2.1 类型安全优先

// types/table.d.ts
export interface TableColumn {
  prop: string;
  label: string;
  width?: number | string;
  fixed?: 'left' | 'right';
  sortable?: boolean | string;
  formatter?: (row: any, column: any, cellValue: any) => string;
  // 更多类型定义...
}
export interface TableProps {
  columns: TableColumn[];
  data: any[];
  loading?: boolean;
  pagination?: {
    currentPage: number;
    pageSize: number;
    total: number;
  };
  // 更多props定义...
}

2.2 组合式API设计

// composables/useTable.ts
import { ref, computed } from 'vue'
import type { TableColumn, TableProps } from '@/types/table'
export function useTable(initialProps: Partial<TableProps>) {
  const props = ref<TableProps>({
    columns: [],
    data: [],
    ...initialProps
  })
  const selectedRows = ref<any[]>([])
  const handleSelectionChange = (rows: any[]) => {
    selectedRows.value = rows
  }
  return {
    props,
    selectedRows,
    handleSelectionChange
    // 更多方法...
  }
}

三、完整表格组件实现

3.1 基础表格封装

<!-- components/BaseTable.vue -->
<template>
  <el-table
    :data="props.data"
    v-loading="props.loading"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-for="column in props.columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :fixed="column.fixed"
      :sortable="column.sortable"
    >
      <template #default="{ row }">
        <slot :name="`column-${column.prop}`" :row="row">
          {{ column.formatter ? column.formatter(row, column, row[column.prop]) : row[column.prop] }}
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { useTable } from '@/composables/useTable'
const props = defineProps<TableProps>()
const emit = defineEmits(['selection-change'])
const { handleSelectionChange } = useTable(props)
</script>

3.2 增强功能扩展

3.2.1 分页集成

// composables/useTablePagination.ts
import { ref, watch } from 'vue'
export function useTablePagination(fetchData: (params: any) => Promise<void>) {
  const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  const handleSizeChange = (size: number) => {
    pagination.value.pageSize = size
    fetchData(getParams())
  }
  const handleCurrentChange = (page: number) => {
    pagination.value.currentPage = page
    fetchData(getParams())
  }
  const getParams = () => ({
    page: pagination.value.currentPage,
    size: pagination.value.pageSize
  })
  return {
    pagination,
    handleSizeChange,
    handleCurrentChange
  }
}

3.2.2 状态管理集成

// stores/tableStore.ts
import { defineStore } from 'pinia'
export const useTableStore = defineStore('table', {
  state: () => ({
    tableData: [],
    loading: false,
    searchParams: {}
  }),
  actions: {
    async fetchTableData(params: any) {
      this.loading = true
      try {
        // 调用API获取数据
        const res = await api.getTableData(params)
        this.tableData = res.data.list
        // 更新分页总数
        // ...
      } finally {
        this.loading = false
      }
    }
  }
})

四、在实际项目中的使用

4.1 页面组件集成

<!-- views/UserManagement.vue -->
<template>
  <div class="user-management">
    <BaseTable
      :columns="columns"
      :data="tableStore.tableData"
      :loading="tableStore.loading"
      :pagination="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #column-action="{ row }">
        <el-button @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(row)">删除</el-button>
      </template>
    </BaseTable>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useTableStore } from '@/stores/tableStore'
import { useTablePagination } from '@/composables/useTablePagination'
const tableStore = useTableStore()
const { pagination, handleSizeChange, handleCurrentChange } = useTablePagination(tableStore.fetchTableData)
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', sortable: true },
  { prop: 'address', label: '地址' },
  { prop: 'action', label: '操作', fixed: 'right' }
]
onMounted(() => {
  tableStore.fetchTableData({ page: 1, size: 10 })
})
</script>

4.2 路由集成示例

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import UserManagement from '@/views/UserManagement.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/user',
      name: 'user',
      component: UserManagement,
      meta: { requiresAuth: true }
    }
  ]
})

五、完美封装的评判标准

1. 类型安全性：100% TypeScript覆盖，编译时检查所有可能的错误
2. 功能完整性：支持排序、分页、筛选、行选择、自定义列等常用功能
3. 可扩展性：通过插槽和组合式API轻松添加新功能
4. 性能优化：虚拟滚动、按需加载、防抖节流等优化手段
5. 一致性：与ElementPlus设计语言保持一致，降低学习成本
6. 文档完善：提供详细的API文档和使用示例

六、进阶优化方向

1. 虚拟滚动：对于大数据量表格，集成虚拟滚动提升性能
2. 列隐藏：添加列显示/隐藏控制功能
3. 导出功能：集成Excel导出能力
4. 自定义主题：通过CSS变量实现主题定制
5. 服务端操作：完善行编辑、批量操作等后端交互

结论

一个”完美”的ElementPlus表格二次封装，不是功能的简单堆砌，而是通过合理的架构设计，在类型安全、功能完整性和开发体验之间找到最佳平衡点。基于Vue3+Vite+TypeScript+Pinia+Router4的技术栈，我们不仅能够构建出强大的表格组件，更能为整个后台管理系统奠定良好的技术基础。这种封装方式在实际项目中已经验证了其稳定性和可维护性，值得在中大型项目中推广使用。