el-table二次封装自定义插槽

`el-table` 是 Element UI 中的一个表格组件，它非常强大且可定制化。如果你想对 `el-table` 进行二次封装并添加自定义插槽（slot），你可以按照以下步骤操作：

1. **理解基本结构**：
- `<template>` 标签下，保留原 `el-table` 的核心结构，包括表头 (`<el-table-column>`) 和表格主体 (`<el-table-row>` 与 `<el-table-body>`)。

   <template>
     <div class="custom-table">
       <!-- 表头部分 -->
       <table slot="header" ref="tableHeader">
         <el-table-column v-for="column in columns" :key="column.label" :prop="column.prop" :label="column.label" />
       </table>

       <!-- 表格主体部分 -->
       <el-table :data="tableData" :size="tableSize" @row-click="handleRowClick">
         <template #default="{ row }"> <!-- 自定义插槽 -->
           <el-table-row :key="row.id">
             <el-table-column v-for="column in columns" :key="column.label" :property="column.prop" :label="column.label" />
           </el-table-row>
         </template>
       </el-table>
     </div>
   </template>

2. **定义插槽接收**：
- 使用 `slot` 属性告诉 Vue 实例你想要接收哪些插槽，如 `slot="header"` 代表接收表头内容。
- 添加对应的事件监听处理，比如 `@row-click` 来响应点击事件。

3. **提供数据和行为**：
- `columns` 变量用于管理列配置；`tableData` 存储表格数据；`tableSize` 控制表格大小；`handleRowClick` 函数处理行点击事件。
- 将这些变量绑定到 `v-bind` 或者 `ref` 上以便控制。

4. **外部调用和传递参数**：
- 如果有需要，可以在外部组件中通过 props、propsData 或者 slots 向内部组件传递配置或数据。