antd vue 的官方文档
s-table 增加自定义页码跳转的支持
- src/components/Table/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| // 在 props 中增加 showQuickJumper
...
showSizeChanger: {
type: Boolean,
default: true
},
+ showQuickJumper: {
+ type: Boolean,
+ default: false
+ },
...
// 在 loadData 方法的 Pagination 配置，增加对 showQuickJumper 配置
...
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
+ showQuickJumper: this.showQuickJumper,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
}) || false
...
|
如果在 props 中设置了默认 false，则在 s-table 组件调用时可以配置 show-quick-jumper 来开启自定义页码跳转
1
2
3
4
5
6
7
8
9
| <s-table
ref="table"
+ show-quick-jumper
:columns="columns"
:data="loadData"
:alert="options.alert"
:rowKey="(record) => record.id"
:rowSelection="options.rowSelection"
>
|
s-table 增加数据总数 total 显示
与改造 s-table 组件，支持自定义页码跳转类似，我们只需把原 antd vue table 组件中的 showTotal 封装进 s-table 组件中即可。
- src/components/Table/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // 在 props 中增加 showTotal
...
showSizeChanger: {
type: Boolean,
default: true
},
showQuickJumper: {
type: Boolean,
default: false
},
+ showTotal: {
+ type: Boolean,
+ default: true
+ },
...
// 在 loadData 方法的 Pagination 配置，增加对 showTotal 配置
...
this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
showQuickJumper: this.showQuickJumper,
+ showTotal: this.showTotal ? (total) => `共 ${total} 条` : false,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
}) || false
...
|
软件版本：vue-antd-pro 3.0.2
- “ant-design-vue”: “^1.7.6”
- “vue”: “^2.6.0”,
参考链接
