【紧贴业务，拿来即用】el-table 表格封装实现直接 copy

我正在参加「掘金·启航计划」

需求

表格封装还是很常见的，这里列举一下封装后支持的能力

• el-table 原始属性字段不变，全部支持
• 通过对象数组来描述表格列
• 支持 jsx 语法
• 表格列头支持插槽与 render 函数写法
• 表格列内容支持插槽与 render 函数写法
• 预留表格列前后位置插槽，方便情景使用
• 表格列动态展示隐藏
• 是否开启内置分页

思路

• 目录结构

  table
      index.vue
      column.vue
      render.vue
  

• index.vue（封装 el-table 并针对情况使用插槽或 column.vue）
  • columnsConfig（定义全局通用 el-table-column 属性）
  • columns（定义表格列描述）
    • prop：唯一 key，也用于插槽 name
    • isSlot：使用插槽，内容一般是表格列
    • render：使用 render 函数渲染表格列
    • attrs：el-table-column 参数，优先级大于 columnsConfig 全局配置
  • frontColumn、behindColumn 插槽位
  • 透传 colunm.vue 中插槽位
• column.vue（主要是抹平表格列头、内容的使用差异）
  • 表格列头
    • render 使用 element-ui 自带能力
    • 插槽 name 为 `${column.prop}Header`
  • 表格列内容
    • render 函数，采用函数式组件作为上下文运行
    • 插槽 name 为 column.prop
  • 设置插槽默认内容来进行友好展示
• render.vue
  • 内部没有维护 data 状态，采用函数式节省性能
• 其他
  • 利用 transform-vue-jsx 支持 render 函数中的 jsx 语法

体验

• 运行效果以及代码如下
  • demo
  • 源码

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励