Ant-Design-Vue-Pro列表展示数据总数

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”,

参考链接