El Table Plus
Introduction
A high-level table component, integrating el-table and el-pagination of Element UI.
Feature
- Configure columns in script.
- Render custom head and body.
- Manage data source innerly.
- Control pagination easily.
Quick Start
$ npm install --save el-table-plus
;;Vue;
Example
html
查询成员列表创建成员
js
const mockAjax = Promise;{returnform:search: ''tableColumns:type: 'selection'type: 'expand'{ // eslint-disable-linereturn<span>厉害了,我滴哥!</span>;}label: '普通列'prop: 'id'label: '排序列'prop: 'name'sortable: 'custom'label: '过滤列'prop: 'type'filters: text: '有效' value: 1 text: '无效' value: 0columnKey: 'type'label: '格式化列'prop: 'gender'{return1: '男'0: '女'gender;}{ // eslint-disable-linereturn<span>自定义列</span>;}<el-button type="text" onClick= this>详情</el-button>;}methods:{console;}{console;}{console;}{console;}{console;}{this$refsform;}async {const data total = await;returndatatotal;}{this;};
API
Attributes
As same as Element UI Table Attributes. Besides, add these attributes:
Param | Type | Default | Description |
---|---|---|---|
columns | object[] | [] | See Table Attributes - column below. |
page-size | number | 20 | |
current-change-async | async function(currentPage, pageSize) | Triger when page changes,require returning value { data: object[], total: number } . |
|
pagination-align | String | 'center' | One of 'left' , 'right' and 'center' . |
Attributes - column
As same as Element UI Table-column Attributes. Besides, add these attributes:
Param | Type | Default | Description |
---|---|---|---|
renderBody | function(h, row) | Render custom body or expand body. |
Events
As same as Element UI Table Events.
Methods
Method | Param | Description |
---|---|---|
reload | Call current-change-async event, and reload in first page. |
|
reloadCurrent | Call current-change-async event, and reload in current page. |
Slots
As same as Element UI Table-column Slots. Besides, add these slots:
Name | Description |
---|---|
caption | The caption of table. |
actionBar | The action bar of table. |