想封装element-plus table如何封装

基于 Vue 3 和 Element Plus 封装 Table 组件可显著提升代码复用性和开发效率。以下是综合多篇实践指南的封装方案，涵盖核心设计思路、关键步骤和最佳实践：

📦 一、封装目标

1. 统一配置管理

   集中处理表格样式、分页、加载状态等通用逻辑，避免重复代码。

2. 灵活扩展性

   支持动态列配置、自定义插槽、异步数据加载，适应复杂业务场景。

3. 简化使用

   通过声明式配置（如 columns 数组）快速生成表格，减少模板代码。

⚙️ 二、核心封装步骤

1. 基础结构设计

<template>
  <div class="table-container">
    <!-- 工具栏（可选） -->
    <div v-if="$slots.toolbar" class="toolbar">
      <slot name="toolbar"></slot>
    </div>
    
    <!-- 表格主体 -->
    <el-table
      v-bind="$attrs"  <!-- 继承所有原生属性 -->
      :data="tableData"
      :border="border"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <!-- 动态生成列 -->
      <template v-for="col in columns" :key="col.prop">
        <el-table-column v-bind="col">
          <!-- 自定义列内容 -->
          <template #default="scope" v-if="col.slot">
            <slot :name="col.slot" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    
    <!-- 分页 -->
    <el-pagination
      v-if="pagination"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    />
  </div>
</template>

关键点：

• 通过 v-bind="$attrs" 继承 Element Plus 原生属性（如 stripe, height）；

• 动态循环 columns 配置生成列，减少模板冗余。

2. Props 设计（核心配置）

interface Column {
  prop: string;       // 数据字段名
  label: string;      // 列标题
  width?: string;     // 列宽
  slot?: string;      // 自定义插槽名
  sortable?: boolean; // 是否排序
}

const props = defineProps({
  columns: { type: Array as PropType<Column[]>, required: true }, // 列配置
  dataSource: { type: Array, default: () => [] },               // 静态数据
  pagination: { type: Boolean, default: true },                  // 是否分页
  loading: { type: Boolean, default: false },                    // 加载状态
  fetchData: { type: Function },                                 // 异步数据函数
  // 其他：border, pageSize, total 等
});

说明：

• fetchData 支持异步数据加载，需返回 { list: [], total: number }；

• slot 属性允许父组件通过插槽自定义列内容（如操作按钮）。

3. 事件与状态管理

// 分页处理
const handlePageChange = (page: number) => {
  currentPage.value = page;
  if (props.fetchData) loadData(); // 触发数据重载
  emit('page-change', page);
};

// 异步加载数据
const loadData = async () => {
  try {
    loading.value = true;
    const res = await props.fetchData({ 
      page: currentPage.value, 
      size: pageSize.value 
    });
    tableData.value = res.list;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
};

// 暴露方法给父组件
defineExpose({ loadData });

关键事件：

• @selection-change：多选事件；

• @sort-change：排序事件（需在列配置中启用 sortable）。

4. 插槽扩展

<!-- 父组件调用示例 -->
<ProTable :columns="columns" :fetch-data="fetchData">
  <!-- 自定义状态列 -->
  <template #status="{ row }">
    <el-tag :type="row.status ? 'success' : 'danger'">
      {{ row.status ? "启用" : "禁用" }}
    </el-tag>
  </template>
  
  <!-- 工具栏 -->
  <template #toolbar>
    <el-button @click="refresh">刷新</el-button>
  </template>
</ProTable>

支持场景：

• 自定义列内容（如渲染标签、按钮）；

• 工具栏添加导出、批量操作等功能。

⚡ 三、进阶功能

1. 动态列显示

   通过 v-if 控制列的显隐（如根据权限动态隐藏列）。

2. 行内操作

   在列配置中增加 action 插槽，支持编辑/删除等按钮：

   <el-table-column label="操作">
     <template #default="scope">
       <el-button @click="emit('edit', scope.row)">编辑</el-button>
     </template>
   </el-table-column>
   

3. 持久化配置

   保存用户自定义的列排序、宽度等设置到 LocalStorage。

💎 四、最佳实践

1. 类型安全

   使用 TypeScript 定义 Column 接口，避免拼写错误。

2. 性能优化

   • 大数据量时启用虚拟滚动（非 Element Plus 原生支持，需自行集成）；

   • 避免在 columns 中使用复杂对象，防止不必要的响应式追踪。

3. 默认值处理

   为分页参数（pageSize、pageSizes）提供合理的默认值。

📚 五、完整示例与资源

• 源码参考：Element Plus 封装示例；

• 演示地址：在线效果预览。

通过此方案，可快速生成高复用性表格组件，减少 50% 以上的重复代码，同时保持与 Element Plus 原生功能的完全兼容性。