mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
fix(data-table): data-table can't use all pagination's props
This commit is contained in:
parent
65b05f1521
commit
98768658b5
@ -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: {
|
||||
}
|
||||
}
|
||||
```
|
||||
}
|
@ -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: {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -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')
|
||||
}
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user