mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
feat(pagination): add total of PaginationInfo (#644)
* feat(pagination): add total of PaginationInfo * fix: update total to itemCount
This commit is contained in:
Yugang Cao
GitHub
parent
4e45f5d9c2
commit
12a8381236
@ -48,6 +48,7 @@
|
||||
- `n-popover`'s `trigger` prop support `'focus'`, closes [#477](https://github.com/TuSimple/naive-ui/issues/477).
|
||||
- `n-message-provider` add `duration` and `max` props.
|
||||
- `n-data-table` add `flex-height` prop, closes [#596](https://github.com/TuSimple/naive-ui/issues/596).
|
||||
- `n-pagination` `PaginationInfo` add `itemCount` prop, closes [#585](https://github.com/TuSimple/naive-ui/issues/585).
|
||||
|
||||
### Fixes
|
||||
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
- `n-popover` 的 `trigger` 属性支持 `'focus'`，关闭 [#477](https://github.com/TuSimple/naive-ui/issues/477)
|
||||
- `n-message-provider` 新增 `duration` 和 `max` 属性
|
||||
- `n-data-table` 新增 `flex-height` 属性，关闭 [#596](https://github.com/TuSimple/naive-ui/issues/596)
|
||||
- `n-pagination` `PaginationInfo` 增加 `itemCount` 属性，关闭 [#585](https://github.com/TuSimple/naive-ui/issues/585)
|
||||
|
||||
### Fixes
|
||||
|
||||
|
||||
@ -59,12 +59,14 @@ function query (page, pageSize = 10, order = 'ascend', filterValues = []) {
|
||||
? orderedData.filter((row) => filterValues.includes(row.column2))
|
||||
: orderedData
|
||||
const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
|
||||
const total = filteredData.length
|
||||
const pageCount = Math.ceil(filteredData.length / pageSize)
|
||||
setTimeout(
|
||||
() =>
|
||||
resolve({
|
||||
pageCount,
|
||||
data: pagedData
|
||||
data: pagedData,
|
||||
total
|
||||
}),
|
||||
1500
|
||||
)
|
||||
@ -81,7 +83,10 @@ export default {
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageCount: 1,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
prefix ({ itemCount }) {
|
||||
return `Total is ${itemCount}.`
|
||||
}
|
||||
},
|
||||
loading: true
|
||||
}
|
||||
@ -95,6 +100,7 @@ export default {
|
||||
).then((data) => {
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
@ -115,6 +121,7 @@ export default {
|
||||
this.Column1.sortOrder = !sorter ? false : sorter.order
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
@ -133,6 +140,7 @@ export default {
|
||||
this.Column2.filterOptionValues = filterValues
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
@ -151,6 +159,7 @@ export default {
|
||||
console.log(data.data)
|
||||
this.pagination.page = currentPage
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
@ -59,12 +59,14 @@ function query (page, pageSize = 10, order = 'ascend', filterValues = []) {
|
||||
? orderedData.filter((row) => filterValues.includes(row.column2))
|
||||
: orderedData
|
||||
const pagedData = filteredData.slice((page - 1) * pageSize, page * pageSize)
|
||||
const total = filteredData.length
|
||||
const pageCount = Math.ceil(filteredData.length / pageSize)
|
||||
setTimeout(
|
||||
() =>
|
||||
resolve({
|
||||
pageCount,
|
||||
data: pagedData
|
||||
data: pagedData,
|
||||
total
|
||||
}),
|
||||
1500
|
||||
)
|
||||
@ -81,7 +83,11 @@ export default {
|
||||
pagination: {
|
||||
page: 1,
|
||||
pageCount: 1,
|
||||
pageSize: 10
|
||||
pageSize: 10,
|
||||
itemCount: 0,
|
||||
prefix ({ itemCount }) {
|
||||
return `共 ${itemCount} 项`
|
||||
}
|
||||
},
|
||||
loading: true
|
||||
}
|
||||
@ -95,6 +101,7 @@ export default {
|
||||
).then((data) => {
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
@ -115,6 +122,7 @@ export default {
|
||||
this.Column1.sortOrder = !sorter ? false : sorter.order
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
@ -133,6 +141,7 @@ export default {
|
||||
this.Column2.filterOptionValues = filterValues
|
||||
this.data = data.data
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
@ -151,6 +160,7 @@ export default {
|
||||
console.log(data.data)
|
||||
this.pagination.page = currentPage
|
||||
this.pagination.pageCount = data.pageCount
|
||||
this.pagination.itemCount = data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
@ -318,7 +318,10 @@ export function useTableData (
|
||||
doUpdatePageSize(pageSize)
|
||||
}
|
||||
}
|
||||
|
||||
const mergedItemCountRef = computed(() => {
|
||||
if (props.remote) return (props.pagination as PaginationProps).itemCount
|
||||
return filteredDataRef.value.length
|
||||
})
|
||||
const mergedPaginationRef = computed<PaginationProps>(() => {
|
||||
return {
|
||||
...props.pagination,
|
||||
@ -332,7 +335,8 @@ export function useTableData (
|
||||
// key still exists but value is undefined
|
||||
page: mergedCurrentPageRef.value,
|
||||
pageSize: mergedPageSizeRef.value,
|
||||
pageCount: mergedPageCountRef.value
|
||||
pageCount: mergedPageCountRef.value,
|
||||
itemCount: mergedItemCountRef.value
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -53,5 +53,6 @@ interface PaginationInfo {
|
||||
page: number
|
||||
pageSize: number
|
||||
pageCount: number
|
||||
itemCount: number | undefined
|
||||
}
|
||||
```
|
||||
|
||||
@ -4,7 +4,9 @@ You may want to add something before and after.
|
||||
|
||||
```html
|
||||
<n-pagination :item-count="101">
|
||||
<template #prefix="{ startIndex }"> From Item No.{{ startIndex }} </template>
|
||||
<template #prefix="{ itemCount, startIndex }">
|
||||
From Item No.{{ startIndex }}, Total is {{ itemCount }}
|
||||
</template>
|
||||
<template #suffix="{ endIndex }"> To Item No.{{ endIndex }} </template>
|
||||
</n-pagination>
|
||||
```
|
||||
|
||||
@ -53,5 +53,6 @@ interface PaginationInfo {
|
||||
page: number
|
||||
pageSize: number
|
||||
pageCount: number
|
||||
itemCount: number | undefined
|
||||
}
|
||||
```
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
|
||||
```html
|
||||
<n-pagination :item-count="101">
|
||||
<template #prefix="{ startIndex }"> 从第 {{ startIndex }} 项开始 </template>
|
||||
<template #prefix="{ itemCount , startIndex }">
|
||||
从第 {{ startIndex }} 项开始, 共 {{ itemCount }} 项
|
||||
</template>
|
||||
<template #suffix="{ endIndex }"> 从第 {{ endIndex }} 项结束 </template>
|
||||
</n-pagination>
|
||||
```
|
||||
|
||||
@ -165,6 +165,17 @@ export default defineComponent({
|
||||
return endIndex
|
||||
})
|
||||
|
||||
const mergedItemCountRef = computed(() => {
|
||||
const { itemCount } = props
|
||||
if (itemCount !== undefined) {
|
||||
return itemCount
|
||||
}
|
||||
warn(
|
||||
'pagination',
|
||||
'`item-count` should be must have if you want to use total.'
|
||||
)
|
||||
})
|
||||
|
||||
const disableTransitionOneTick = (): void => {
|
||||
void nextTick(() => {
|
||||
const { value: selfEl } = selfRef
|
||||
@ -311,6 +322,7 @@ export default defineComponent({
|
||||
mergedPageCount: mergedPageCountRef,
|
||||
startIndex: startIndexRef,
|
||||
endIndex: endIndexRef,
|
||||
itemCount: mergedItemCountRef,
|
||||
handleJumperInput,
|
||||
handleBackwardClick: backward,
|
||||
handleForwardClick: forward,
|
||||
@ -455,7 +467,8 @@ export default defineComponent({
|
||||
pageSize: mergedPageSize,
|
||||
pageCount: mergedPageCount,
|
||||
startIndex: this.startIndex,
|
||||
endIndex: this.endIndex
|
||||
endIndex: this.endIndex,
|
||||
itemCount: this.itemCount
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
@ -564,7 +577,8 @@ export default defineComponent({
|
||||
pageSize: mergedPageSize,
|
||||
pageCount: mergedPageCount,
|
||||
startIndex: this.startIndex,
|
||||
endIndex: this.endIndex
|
||||
endIndex: this.endIndex,
|
||||
itemCount: this.itemCount
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@ -6,6 +6,7 @@ export type RenderPrefix = (info: {
|
||||
page: number
|
||||
pageSize: number
|
||||
pageCount: number
|
||||
itemCount: number | undefined
|
||||
}) => VNode
|
||||
|
||||
export type RenderSuffix = RenderPrefix
|
||||
|
||||
Loading…
Reference in New Issue
Block a user