Element Table 组件增强

📌 Feature 功能

除了 Element Table 的所有功能，组件还支持以下特性：

• load 远程数据加载
• 集成 Pagination 分页组件
• columns 列字段配置，js 方式配置更灵活
• 可通过具名作用域插槽 header:[columns[i].prop] 渲染列表头
• 支持多种方式快捷渲染列字段：
  1. columns[i].render 函数 jsx 方式
  2. 具名作用域插槽 [columns[i].prop] 模板方式
  3. 配置字段 columns[i].renderOption 渲染选项式数据
  4. 配置字段 columns[i].formatter 调用 Vue 全局过滤器 filter 格式化数据

Todo 待办

1. 静态数据分页 / 排序 / 筛选

Demo 示例

https://bhuh12.github.io/el-table-ext/

Install 安装

Install npm

// yarn
yarn add el-table-ext

// or npm
npm i el-table-ext -S

Install plugin

import Vue from 'vue'

// 引入 Element
import ElementUI, { Table as ElTable } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入 el-table-ext
import ElTableExt from 'el-table-ext'
import 'el-table-ext/dist/lib/el-table-ext.css'

Vue.use(ElementUI)
Vue.use(ElTableExt, { ElTable })

Use 使用说明

参考 Demo

Attributes 组件属性

| 参数 | 说明 | 类型 | 必需 | 可选值 | 默认值 | | ------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ---- | ------------------------------ | ------ | | columns | 列数据参考 Table-column Attributes 列属性 | Array | 是 | — | — | | data | 静态列表数据 | Array | — | — | — | | query | 异步查询列表数据，成功后返回 Promise.resolve({ data: Array, total: Number }) | Function({ pagin, filters, sorts }) | — | — | — | | pager | 分页选项，为 false 则禁用分页参考 Element - Pagination 分页 | Object, Boolean | — | — | — | | auto-load | 是否自动加载 | Boolean | — | — | true | | default-sort | 默认排序，远程排序需要配置对应字段 sortable: 'custom' | Object{prop, order} | — | order: ascending, descending | — | | height | 列表高度 | String | — | — | — | | options | 扩展 el-table 配置参考 Element - Table 表格 | Object | — | — | — |

Table-column Attributes 列属性

Table 支持 Element Table 组件 column 的所有配置(参考：Element - Table 表格 / Table-column Attributes )，并且扩展了额外的支持

| 参数 | 说明 | 类型 | 必需 | 可选值 | 默认值 | | ------------ | -------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ---- | ------ | ------ | | render | jsx 方式渲染字段数据 | Function(h, { row, column, value, index }) | — | — | — | | renderOption | 渲染选项数据，展示匹配到的选项文本和 class 样式。如果为 String 则从 Vue.prototype.$option 上匹配选项列表 | String, Array[{ text, value, class }] | — | — | — | | formatter | 字段格式化方法。如果为 String 则匹配列表所在组件的过滤器或全局过滤器格式化，暂不支持额外参数 | String, Function(row, column, value, index) | — | — | — |

Slots 插槽

| 插槽名 | 说明 | 作用域 | | --------------- | ---------------- | ----------------------------- | | [prop] | 自定义列的内容 | { row, column, value, index } | | header:[prop] | 自定义表头的内容 | { column, index } |

Events 事件

Table 支持 Element Table / Pagination 组件的所有事件

参考：

• Element - Table 表格 - 事件

• Element - Pagination 分页 - 事件

Methods 方法

| 方法名 | 说明 | 参数 | | -------- | ------------ | -------- | | load | 加载表格数据 | — | | jumpPage | 分页跳转 | page = 1 |

Changelog 更新日志