mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-05 13:00:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(table)

Browse Source
This commit is contained in:
07akioni 2020-02-03 02:42:51 +08:00
parent 48bccf47a5
commit 431c82ca4e
2 changed files with 107 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
demo/documentation/components/dataTable/enUS/ajaxUsage.md
View File

@ -2,11 +2,13 @@
```html ```html
<n-data-table <n-data-table
remote
ref="table" ref="table"
:columns="columns" :columns="columns"
:data="data" :data="data"
:loading="loading" :loading="loading"
:pagination="pagination" :pagination="pagination"
:paging="false"
:row-key="rowKey" :row-key="rowKey"
@sorter-change="handleSorterChange" @sorter-change="handleSorterChange"
@filters-change="handleFiltersChange" @filters-change="handleFiltersChange"
@ -15,39 +17,56 @@
``` ```
```js ```js
const nameColumn = { const Column1 = {
title: 'Name', title: 'Column1',
key: 'name', key: 'column1',
sorter: true, sorter: true,
sortOrder: false, sortOrder: false
render (h, row) {
return h('span', [row.name.first, ' ', row.name.last])
}
} }
const genderColumn = { const Column2 = {
title: 'Gender', title: 'Column2',
key: 'gender', key: 'column2',
filterable: true, filter: true,
filterOptionValues: [], filterOptionValues: [],
filterOptions: [ filterOptions: [
{ label: 'Male', value: 'male' }, { label: 'Value1', value: 1 },
{ label: 'Female', value: 'female' } { label: 'Value2', value: 2 }
] ]
} }
const columns = [ const columns = [
nameColumn, Column1,
genderColumn, Column2,
{ {
title: 'Email', title: 'Column3',
key: 'email' key: 'column3'
} }
] ]
function createQueryString (querys) { const data = Array.apply(null, { length: 987 }).map((_, index) => {
const queryString = Object.keys(querys).map(key => `${key}=${querys[key]}`).join('&') return {
return queryString ? '?' + queryString : '' 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 { export default {
@ -55,70 +74,89 @@ export default {
return { return {
data: [], data: [],
columns, columns,
nameColumn, Column1,
genderColumn, Column2,
pagination: { pagination: {
page: 1, page: 1,
pageCount: 100, pageCount: 1,
pageSize: false pageSize: 10
}, },
loading: false, loading: true,
} }
}, },
mounted () { mounted () {
this.getData().then(data => { query(
this.data = data.results this.pagination.page,
}) this.pagination.pageSize,
}, this.Column1.sortOrder,
methods: { this.Column2.filterOptionValues
rowKey (data) { ).then(data => {
return data.id.value this.data = data.data
}, this.pagination.pageCount = data.pageCount
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 this.loading = false
}) })
}, },
methods: {
rowKey (rowData) {
return rowData.column1
},
handleSorterChange (sorter) { handleSorterChange (sorter) {
if (!sorter) { if (!sorter || sorter.columnKey === 'column1') {
this.nameColumn.sortOrder = false if (!this.loading) {
this.getData().then(data => { this.loading = true
this.data = data.results 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
}) })
return
} }
if (sorter.columnKey === 'name') {
this.getData().then(data => {
this.data = data.results
this.nameColumn.sortOrder = sorter.sortOrder
})
} }
}, },
handleFiltersChange (filters, initiatorColumn) { handleFiltersChange (filters) {
this.getData().then(data => { if (!this.loading) {
this.data = data.results this.loading = true
if (initiatorColumn.key === 'gender') { const filterValues = filters
this.genderColumn.filterOptionValues = filters .filter(filter => filter.columnKey === 'column2')
.filter(filter => filter.columnKey === 'gender')
.map(filter => filter.filterOptionValue) .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) { handlePageChange (currentPage) {
this.getData({ if (!this.loading) {
page: currentPage this.loading = true
}).then(data => { console.log(currentPage)
this.data = data.results 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.page = currentPage
this.pagination.pageCount = data.pageCount
this.loading = false
}) })
} }
} }
} }
}
``` ```
```css ```css

6
demo/documentation/components/dataTable/enUS/index.md
View File

@ -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| |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.| |min-height|`number`|`null`|The min-height of the table.|
|loading|`boolean`|`false`|| |loading|`boolean`|`false`||
|bordered|`boolean`|`true`||
|scroll-x|`number`|`null`|If columns are horizontal fixed, scroll-x need to be set| |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)| |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`|| |row-class-name|`string \| (rowData: object, index : number) : string \| object`|`null`||
|checked-row-keys|`Array<string \| number> \| null`|`null`|| |checked-row-keys|`Array<string \| number> \| null`|`null`||
|default-checked-row-keys|`Array<string \| number>`|`[]`|| |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 ## Events
|Name|Parameters|Description| |Name|Parameters|Description|
|-|-|-| |-|-|-|
|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, sourceColumn: object) : 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 }) : void`|| |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-change|`(page: number)`||
|page-size-change|`(pageSize: number)`|| |page-size-change|`(pageSize: number)`||
|checked-row-keys-change|`(keys: Array<string \| number>)`|| |checked-row-keys-change|`(keys: Array<string \| number>)`||