mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
doc(table)
This commit is contained in:
07akioni
parent
48bccf47a5
commit
431c82ca4e
@ -2,11 +2,13 @@
|
||||
|
||||
```html
|
||||
<n-data-table
|
||||
remote
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:paging="false"
|
||||
:row-key="rowKey"
|
||||
@sorter-change="handleSorterChange"
|
||||
@filters-change="handleFiltersChange"
|
||||
@ -15,39 +17,56 @@
|
||||
```
|
||||
|
||||
```js
|
||||
const nameColumn = {
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
const Column1 = {
|
||||
title: 'Column1',
|
||||
key: 'column1',
|
||||
sorter: true,
|
||||
sortOrder: false,
|
||||
render (h, row) {
|
||||
return h('span', [row.name.first, ' ', row.name.last])
|
||||
}
|
||||
sortOrder: false
|
||||
}
|
||||
|
||||
const genderColumn = {
|
||||
title: 'Gender',
|
||||
key: 'gender',
|
||||
filterable: true,
|
||||
const Column2 = {
|
||||
title: 'Column2',
|
||||
key: 'column2',
|
||||
filter: true,
|
||||
filterOptionValues: [],
|
||||
filterOptions: [
|
||||
{ label: 'Male', value: 'male' },
|
||||
{ label: 'Female', value: 'female' }
|
||||
{ label: 'Value1', value: 1 },
|
||||
{ label: 'Value2', value: 2 }
|
||||
]
|
||||
}
|
||||
|
||||
const columns = [
|
||||
nameColumn,
|
||||
genderColumn,
|
||||
Column1,
|
||||
Column2,
|
||||
{
|
||||
title: 'Email',
|
||||
key: 'email'
|
||||
title: 'Column3',
|
||||
key: 'column3'
|
||||
}
|
||||
]
|
||||
|
||||
function createQueryString (querys) {
|
||||
const queryString = Object.keys(querys).map(key => `${key}=${querys[key]}`).join('&')
|
||||
return queryString ? '?' + queryString : ''
|
||||
const data = Array.apply(null, { length: 987 }).map((_, index) => {
|
||||
return {
|
||||
column1: index,
|
||||
column2: index % 2 + 1,
|
||||
column3: 'a' + index
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function query (page, pageSize = 10, order = 'ascend', filterValues = []) {
|
||||
return new Promise(resolve => {
|
||||
const copiedData = data.map(v => v)
|
||||
const orderedData = order === 'descend' ? copiedData.reverse() : copiedData
|
||||
const filteredData = filterValues.length ?
|
||||
orderedData.filter(row => filterValues.includes(row.column2)) :
|
||||
orderedData
|
||||
const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
|
||||
const pageCount = Math.ceil(filteredData.length / pageSize)
|
||||
setTimeout(() => resolve({
|
||||
pageCount,
|
||||
data: pagedData
|
||||
}), 1500)
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
@ -55,67 +74,86 @@ export default {
|
||||
return {
|
||||
data: [],
|
||||
columns,
|
||||
nameColumn,
|
||||
genderColumn,
|
||||
Column1,
|
||||
Column2,
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageCount: 100,
|
||||
pageSize: false
|
||||
pageCount: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
loading: false,
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getData().then(data => {
|
||||
this.data = data.results
|
||||
query(
|
||||
this.pagination.page,
|
||||
this.pagination.pageSize,
|
||||
this.Column1.sortOrder,
|
||||
this.Column2.filterOptionValues
|
||||
).then(data => {
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
rowKey (data) {
|
||||
return data.id.value
|
||||
},
|
||||
getData (params = {}) {
|
||||
this.loading = true
|
||||
!params.results && (params.results = 8)
|
||||
const URL = 'https://randomuser.me/api' + createQueryString(params)
|
||||
return fetch(URL)
|
||||
.then(res => res.json())
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
rowKey (rowData) {
|
||||
return rowData.column1
|
||||
},
|
||||
handleSorterChange (sorter) {
|
||||
if (!sorter) {
|
||||
this.nameColumn.sortOrder = false
|
||||
this.getData().then(data => {
|
||||
this.data = data.results
|
||||
})
|
||||
return
|
||||
}
|
||||
if (sorter.columnKey === 'name') {
|
||||
this.getData().then(data => {
|
||||
this.data = data.results
|
||||
this.nameColumn.sortOrder = sorter.sortOrder
|
||||
})
|
||||
if (!sorter || sorter.columnKey === 'column1') {
|
||||
if (!this.loading) {
|
||||
this.loading = true
|
||||
query(
|
||||
this.pagination.page,
|
||||
this.pagination.pageSize,
|
||||
!sorter ? false : sorter.order,
|
||||
this.Column2.filterOptionValues
|
||||
).then(data => {
|
||||
this.Column1.sortOrder = !sorter ? false : sorter.order,
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handleFiltersChange (filters, initiatorColumn) {
|
||||
this.getData().then(data => {
|
||||
this.data = data.results
|
||||
if (initiatorColumn.key === 'gender') {
|
||||
this.genderColumn.filterOptionValues = filters
|
||||
.filter(filter => filter.columnKey === 'gender')
|
||||
.map(filter => filter.filterOptionValue)
|
||||
}
|
||||
})
|
||||
handleFiltersChange (filters) {
|
||||
if (!this.loading) {
|
||||
this.loading = true
|
||||
const filterValues = filters
|
||||
.filter(filter => filter.columnKey === 'column2')
|
||||
.map(filter => filter.filterOptionValue)
|
||||
query(
|
||||
this.pagination.page,
|
||||
this.pagination.pageSize,
|
||||
this.Column1.sortOrder,
|
||||
filterValues
|
||||
).then(data => {
|
||||
this.Column2.filterOptionValues = filterValues
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
handlePageChange (currentPage) {
|
||||
this.getData({
|
||||
page: currentPage
|
||||
}).then(data => {
|
||||
this.data = data.results
|
||||
this.pagination.page = currentPage
|
||||
})
|
||||
if (!this.loading) {
|
||||
this.loading = true
|
||||
console.log(currentPage)
|
||||
query(
|
||||
currentPage,
|
||||
this.pagination.pageSize,
|
||||
this.Column1.sortOrder,
|
||||
this.Column2.filterOptionValues
|
||||
).then(data => {
|
||||
this.data = data.data
|
||||
console.log(data.data)
|
||||
this.pagination.page = currentPage
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,9 +35,9 @@ ajaxUsage
|
||||
|max-height|`number`|`null`|The max-height of the table. If content height is larger than it, the header will be fixed at top|
|
||||
|min-height|`number`|`null`|The min-height of the table.|
|
||||
|loading|`boolean`|`false`||
|
||||
|bordered|`boolean`|`true`||
|
||||
|scroll-x|`number`|`null`|If columns are horizontal fixed, scroll-x need to be set|
|
||||
|pagination|`false \| object`|`false`|See [Pagination props](n-pagination#Props)|
|
||||
|paging|`boolean`|If data-table do automatic paging. You may set it to `false` in async usage.|
|
||||
|row-class-name|`string \| (rowData: object, index : number) : string \| object`|`null`||
|
||||
|checked-row-keys|`Array<string \| number> \| null`|`null`||
|
||||
|default-checked-row-keys|`Array<string \| number>`|`[]`||
|
||||
@ -58,8 +58,8 @@ These methods can help you control table in an uncontrolled manner. However, it'
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, sourceColumn: object) : void`||
|
||||
|sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false }) : void`||
|
||||
|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, initiatorColumn: object)`||
|
||||
|sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false } \| null)`|If there won't be a active sorter after change, sorter-change will emit `null`|
|
||||
|page-change|`(page: number)`||
|
||||
|page-size-change|`(pageSize: number)`||
|
||||
|checked-row-keys-change|`(keys: Array<string \| number>)`||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user