Element Table 组件增强
除了 Element Table 的所有功能,组件还支持以下特性:
load
远程数据加载- 集成 Pagination 分页组件
columns
列字段配置,js 方式配置更灵活- 可通过具名作用域插槽
header:[columns[i].prop]
渲染列表头 - 支持多种方式快捷渲染列字段:
columns[i].render
函数 jsx 方式- 具名作用域插槽
[columns[i].prop]
模板方式 - 配置字段
columns[i].renderOption
渲染选项式数据 - 配置字段
columns[i].formatter
调用 Vue 全局过滤器filter
格式化数据
- 静态数据分页 / 排序 / 筛选
https://bhuh12.github.io/el-table-ext/
// yarn
yarn add el-table-ext
// or npm
npm i el-table-ext -S
import Vue from 'vue'
// 引入 Element
import ElementUI 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)
参考 Demo
参数 | 说明 | 类型 | 必需 | 可选值 | 默认值 |
---|---|---|---|---|---|
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 | 列表高度flexible 设置为 false 才生效 |
String | — | — | — |
flexible | 是否伸缩盒布局。 如果为 true,设置的高度将不生效 |
Boolean | — | — | true |
empty-text | 空数据时显示的文本内容,也可以通过 slot="empty" 设置 | String | — | — | '暂无数据' |
empty-image | 空数据时显示的图片 | String | — | — | — |
empty-image-size | 空数据图片大小(宽度) | Number | — | — | — |
options | 扩展 el-table 配置 参考 Element - Table 表格 |
Object | — | — | — |
Table 支持 Element Table 组件 column 的所有配置(参考:Element - Table 表格 / Table-column Attributes ),并且扩展了额外的支持
参数 | 说明 | 类型 | 必需 | 可选值 | 默认值 |
---|---|---|---|---|---|
render | jsx 方式渲染字段数据 | Function(h, { row, column, value, index }) | — | — | — |
renderOption | 渲染选项数据,展示匹配到的选项文本和 class 样式。 | { text, value, class }[] | — | — | — |
formatter | 字段格式化方法。如果为 String 则匹配全局过滤器格式化,暂不支持额外参数 | String, Function(row, column, value, index) | — | — | — |
sortable | 对应列是否可以排序,如果需要远程排序请设置为 'custom' | true, false, 'custom' | — | — | false |
visible | 对应列是否显示 | Boolean | — | — | true |
插槽名 | 说明 | 作用域 |
---|---|---|
[prop] |
自定义列的内容 | { row, column, value, index } |
header:[prop] |
自定义表头的内容 | { column, index } |
empty | 空数据时展示的内容 | — |
append | 插入至表格最后一行之后的内容,如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。若表格有合计行,该 slot 会位于合计行之上。 | — |
Table 支持 Element Table / Pagination 组件的所有事件
参考:
方法名 | 说明 | 参数 |
---|---|---|
load | 加载表格数据 | — |
jumpPage | 分页跳转 | page = 1 |
adjust | 更新布局 | — |