fix(data-table): data-table can't use all pagination's props

This commit is contained in:
07akioni 2020-04-23 18:36:54 +08:00
parent 65b05f1521
commit 98768658b5
3 changed files with 35 additions and 96 deletions

View File

@ -1,5 +1,4 @@
# Controlled Pagination
```html
<n-data-table
ref="table"
@ -22,49 +21,16 @@ const columns = [
{
title: 'Address',
key: 'address'
},
{
title: 'Tags',
key: 'tags',
render (h, row) {
const tags = row.tags.map(tagKey => {
return (
<n-tag
style='margin-right:5px'
type={tagKey.length > 5 ? 'warning' : 'default'}
>
{tagKey}
</n-tag>
)
})
return tags
}
}
]
const data = [
{
key: 0,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
},
{
key: 1,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
key: index,
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
@ -73,15 +39,16 @@ export default {
columns,
pagination: {
page: 2,
pageCount: data.length,
pageSize: 1,
pageSize: 5,
showSizePicker: true,
pageSizes: [3, 5, 7],
onChange: page => {
this.pagination.page = page
},
onPageSizeChange: pageSize => {
this.pagination.pageSize = pageSize
}
}
}
},
methods: {
}
}
```
}

View File

@ -22,49 +22,16 @@ const columns = [
{
title: 'Address',
key: 'address'
},
{
title: 'Tags',
key: 'tags',
render (h, row) {
const tags = row.tags.map(tagKey => {
return (
<n-tag
style='margin-right:5px'
type={tagKey.length > 5 ? 'warning' : 'default'}
>
{tagKey}
</n-tag>
)
})
return tags
}
}
]
const data = [
{
key: 0,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
},
{
key: 1,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}
]
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
key: index,
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
@ -73,15 +40,17 @@ export default {
columns,
pagination: {
page: 2,
pageCount: data.length,
pageSize: 1,
pageSize: 5,
showSizePicker: true,
pageSizes: [3, 5, 7],
onChange: page => {
this.pagination.page = page
},
onPageSizeChange: pageSize => {
this.pagination.pageSize = pageSize
}
}
}
},
methods: {
}
}
```

View File

@ -48,7 +48,10 @@
:theme="syntheticTheme"
:page="syntheticPagination.page"
:page-count="syntheticPagination.pageCount"
:page-size="syntheticPagination.pageSize"
:page-slot="pagination.pageSlot"
:page-sizes="pagination.pageSizes"
:show-size-picker="pagination.showSizePicker"
:show-quick-jumper="!!pagination.showQuickJumper"
:disabled="!!pagination.disabled"
:on-change="syntheticOnPageChange"
@ -371,11 +374,11 @@ export default {
this.pagination.onPageSizeChange && this.pagination.onPageSizeChange(pageSize)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.internalPageSize = pageSize
this.$emit('change', {
sorter: createShallowClonedObject(this.syntheticActiveSorter),
pagination: createShallowClonedObject(this.syntheticPagination),
filters: createShallowClonedObject(this.syntheticActiveFilters)
})
// this.$emit('change', {
// sorter: createShallowClonedObject(this.syntheticActiveSorter),
// pagination: createShallowClonedObject(this.syntheticPagination),
// filters: createShallowClonedObject(this.syntheticActiveFilters)
// })
this.$emit('page-size-change')
}
},