El-table-ext NPM

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 待办

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

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