基于Element Plus的El-Table二次封装：实现动态列渲染

背景

在Vue.js项目开发中，Element Plus的el-table组件是我们常用的表格展示组件。但在实际业务中，我们经常需要更灵活地控制表格列的显示与隐藏，或者需要动态渲染列内容。本文将介绍如何通过二次封装el-table实现一个支持动态列渲染的EasyTable组件。

实现效果

组件设计思路

核心功能

1. 动态列配置：通过columns.prop的hidden属性控制列的显示与隐藏

2. 插槽支持：保留原有el-table-column的插槽用法

3. 内容渲染器：内置EasyRenderer组件处理复杂内容渲染

4. 默认配置：统一设置列的对齐方式、溢出提示等

实现原理

import { omit } from 'lodash'

created() {
        // 获取默认插槽的内容，如果没有则使用空数组
        let slots = this.$slots.default?.() || []
        // 如果第一个插槽的类型描述为 'v-fgt'，则取其内部子元素
        if (slots[0]?.type?.description === 'v-fgt') slots = slots[0].children
        // 对插槽内容进行映射处理，合并 props 和子元素属性
        let slotsMap = slots.map(({ props, children }) => ({ ...props, ...omit(children, ['_']) }))
        // 将处理后的插槽内容添加到 columns 数组的开头
        this.columns.unshift(...slotsMap)
}

 这段代码在组件创建时，会从插槽中获取列配置，并与columns prop中的配置合并，实现了声明式与编程式两种列定义方式的兼容。

核心代码解析

EasyTable组件

EasyRenderer组件

EasyRenderer是一个通用渲染器，可以处理函数式渲染、对象配置渲染和简单文本渲染三种情况。

使用示例

插槽用法

 编程式用法

功能特点

1. 混合使用：可以同时使用el-table-column插槽和columns prop定义列

2. 动态控制：通过hidden属性可以动态控制列的显示与隐藏

3. 统一配置：通过defaultTableColumn设置所有列的默认属性

4. 灵活渲染：支持函数式、对象式和简单文本三种渲染方式

5. 内存安全：在组件卸载时恢复原始列配置，避免内存泄漏

总结

通过二次封装el-table，我们实现了一个更加灵活、易用的表格组件EasyTable。它保留了Element Plus表格组件的所有功能，同时增加了动态列配置、统一默认设置等特性，大大提高了开发效率。

在实际项目中，我们可以根据业务需求进一步扩展这个组件，比如添加列拖拽排序、列固定、导出Excel等功能，打造一个功能更加强大的表格解决方案。

希望这篇博客对你理解和使用这个组件有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论。