×

ElmentPlus-通用表格封装

独孤求败 独孤求败 发表于2026-02-09 09:02:01 浏览16 评论0

抢沙发发表评论

背景

有的时候我们做后台管理系统的时候经常用到表格，表格的头可能是多层级的，或者表格的列可能需要自定义样式，如何封装一个通用的表格呢？

不封装表格

  • 需要编写重复类似的代码。
  • 可能会存在代码嵌套，不利于维护。
  • 列内容如果要自定义的话要在嵌套代码中编写逻辑。

效果图：

图片.png

示例代码：

图片

多级表头封装

思路

  • 基于 Element Plus 的 ElTable 和 ElTableColumn 组件进行二次封装
  • 采用配置化传参的方式定义表头结构，支持任意层级表头嵌套
  • 通过 props 透传表格原有支持的属性提升灵活性
  • 递归渲染多级表头（ElTableColumn 嵌套实现多级效果）
  • 支持表格基础功能（排序、对齐方式等）的配置

实现

效果图：

图片

components/sys-table/index.vue

图片

components/sys-table/ProTableColumn.vue

图片

使用：

App.vue

图片

总结

  • 获取当前实例的插槽数据。getCurrentInstance().$slots
  • 然后将插槽数据传递给ProTableColumn.vue组件。


群贤毕至

访客