https://github.com/chikara-chan/el-table-plus
🛴 A high-level table component, integrating el-table and el-pagination of Element UI.
https://github.com/chikara-chan/el-table-plus
Last synced: 9 months ago
JSON representation
🛴 A high-level table component, integrating el-table and el-pagination of Element UI.
- Host: GitHub
- URL: https://github.com/chikara-chan/el-table-plus
- Owner: chikara-chan
- License: mit
- Created: 2017-06-22T07:42:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-05T06:47:00.000Z (over 7 years ago)
- Last Synced: 2025-04-11T05:09:18.574Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 33
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-element - el-table-plus - level table component, integrating el-table and el-pagination of Element UI. (Components)
README
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
``` bash
$ npm install --save el-table-plus
```
``` js
import ElTablePlus from 'el-table-plus';
import 'el-table-plus/lib/index.css';
Vue.use(ElTablePlus);
```
## Online Example
[codesandbox](https://codesandbox.io/s/71wpwx701q)
## Example
**html**
``` html
查询
成员列表
创建成员
```
**js**
``` js
const mockAjax = ({ pageNum, pageSize, search }) => Promise.resolve({
data: Array.apply(null, { length: pageSize }).map((item, index) =>
({
id: (pageNum - 1) * pageSize + index,
name: search || '张三',
type: index % 2 ? '有效' : '无效',
gender: index % 2
})
),
total: 100
});
export default {
data() {
return {
form: {
search: ''
},
tableColumns: [
{
type: 'selection'
},
{
type: 'expand',
renderBody(h) { // eslint-disable-line
return (
厉害了，我滴哥！
);
}
},
{
label: '普通列',
prop: 'id'
},
{
label: '排序列',
prop: 'name',
sortable: 'custom'
},
{
label: '过滤列',
prop: 'type',
filters: [{ text: '有效', value: 1 }, { text: '无效', value: 0 }],
columnKey: 'type'
},
{
label: '格式化列',
prop: 'gender',
formatter(gender) {
return {
1: '男',
0: '女'
}[gender];
}
},
{
renderHeader(h) { // eslint-disable-line
return (
自定义列
);
},
renderBody: (h, { id }) => [
this.getDetail(id)}>详情
]
}
]
};
},
methods: {
filterChange(filters) {
console.log(filters);
},
sortChange({column, prop, order}) {
console.log(column, prop, order);
},
selectionChange(selections) {
console.log(selections);
},
getDetail(id) {
console.log(id);
},
create() {
console.log('create');
},
submit() {
this.$refs.form.validate(async valid => {
if (!valid) {
return;
}
this.$refs.table.reload();
});
},
async currentChangeAsync(currentPage, pageSize) {
const { data, total } = await mockAjax({
...this.form,
pageNum: currentPage,
pageSize: pageSize
});
return {
data,
total
};
}
},
mounted() {
this.submit();
}
};
```
## API
### Attributes
As same as Element UI [Table Attributes](http://element.eleme.io/#/en-US/component/table). 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](http://element.eleme.io/#/en-US/component/table). 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](http://element.eleme.io/#/en-US/component/table).
### 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](http://element.eleme.io/#/en-US/component/table). Besides, add these slots:
Name | Description
--- | ---
caption | The caption of table.
actionBar | The action bar of table.