Element Table Extend

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 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)

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	列表高度 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-column Attributes 列属性

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

Slots 插槽

插槽名	说明	作用域
[prop]	自定义列的内容	{ row, column, value, index }
header:[prop]	自定义表头的内容	{ column, index }
empty	空数据时展示的内容	—
append	插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。	—

Events 事件

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

参考：

• Element - Table 表格 - 事件

• Element - Pagination 分页 - 事件

Methods 方法

方法名	说明	参数
load	加载表格数据	—
jumpPage	分页跳转	page = 1
adjust	更新布局	—

Changelog 更新日志