2019-12-10 18:49:06 +08:00
|
|
|
# Table
|
|
|
|
|
2019-12-13 15:20:50 +08:00
|
|
|
<!--single-column-->
|
|
|
|
|
2019-12-10 18:49:06 +08:00
|
|
|
Table is used to displays rows of data.
|
|
|
|
|
|
|
|
# When To Use
|
|
|
|
|
|
|
|
- To display a collection of structured data.
|
|
|
|
- To sort, search, paginate, filter data.
|
|
|
|
|
|
|
|
## Demos
|
|
|
|
|
|
|
|
```demo
|
|
|
|
basic
|
2019-12-16 17:43:56 +08:00
|
|
|
customStyle
|
2019-12-10 18:49:06 +08:00
|
|
|
select
|
2019-12-10 19:16:25 +08:00
|
|
|
filterAndSorter
|
2019-12-13 15:20:50 +08:00
|
|
|
asyncFilterItems
|
|
|
|
filterMultiple
|
2019-12-11 18:45:44 +08:00
|
|
|
ajaxUsage
|
|
|
|
fixedHeader
|
2019-12-12 14:27:31 +08:00
|
|
|
fixedHeaderColumn
|
2019-12-12 15:30:29 +08:00
|
|
|
ellipsis
|
2019-12-12 16:10:20 +08:00
|
|
|
renderHeader
|
2019-12-13 15:20:50 +08:00
|
|
|
bestPractices
|
2019-12-10 18:49:06 +08:00
|
|
|
```
|
|
|
|
|
2019-12-16 17:43:56 +08:00
|
|
|
## Column
|
2019-12-17 10:50:23 +08:00
|
|
|
|
|
|
|
| Property | Description | Type | Default |
|
|
|
|
| :--------------- | :-------------------------------------------------------------------------------------------------------- | :---------------------------- | :------ |
|
|
|
|
| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
|
|
|
| ellipsis | ellipsize cell content,recommended when no property:render is used | boolean | false |
|
|
|
|
| className | className of this column | boolean | false |
|
|
|
|
| title | Title of this column | String | - |
|
|
|
|
| key | Unique key of this column,**required** | string | - |
|
|
|
|
| render | Renderer of the table cell. The return value should be a VueNode | Function(h, record, index) {} | - |
|
|
|
|
| sortable | use column sort, need property:sorter | boolean | false |
|
|
|
|
| sorter | Sort function for local sort, see Array.sort's compareFunction.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
|
|
|
| defaultSortOrder | default sort order | 'ascend' \| 'descend' | - |
|
|
|
|
| filterable | use filter | boolean | false |
|
|
|
|
| filter | Filter function for local filter.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
|
|
|
| filterMultiple | Whether multiple filters can be selected | boolean | false |
|
|
|
|
| defaultFilter | default filter selected | String | - |
|
|
|
|
| filterItems | Filter menu config,format as [{label,value}] | object[] | - |
|
|
|
|
| asyncFilterItems | async filter menu config ,Function returns [{label,value}] | Function | - |
|