Ant Design Vue —— table 组件 自定义分页器、排序、插槽使用

Ant Design Vue 是蚂蚁金服推出的后台服务组件库，目前有62个开箱即用的高质量 Vue 组件。后台管理应用中，table和form表单的使用场景比较多，于是做一下table组件的使用总结。

一、table组件官方文档地址

二、举个栗子，定义一个带分页器的table组件：

<a-table ref="table" rowKey=id :columns="columns" :dataSource="lists" :pagination="pagination" @change="tableChange" > </a-table>

ref=“table” ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，这里指向table这个元素

:columns=“columns” 表格列的配置描述，定义在data初始化数据中

columns: [ { title: "id", dataIndex: "id" // 列数据在数据项中对应的 key }, ]

:dataSource=“lists” 数据数组

:pagination=“pagination” true显示分页器，反之 设置为true效果是这样的

可自定义分页器，自定义分页器的效果如下：

@change=“tableChange” 分页、排序、筛选变化时触发 methods:{ tableChange(e){ console.log(e) // 分页、排序、筛选变化时的数据 }

三：自定义分页器

在data中定义：

pagination: { current: 1, pageSize: 10, defaultPageSize: 10, showTotal: total => `共 ${total} 条数据`, showSizeChanger: true, // 可以改变每页个数 pageSizeOptions: ["10", "20", "30", "40"], onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize) }

当用户点击切换页数的时候根据获得的数据去切换pagination对象的current和pageSize这两个字段即可。

onChange(){ const { current, pageSize } = e; this.pagination.current = current; this.pagination.pageSize = pageSize; this.getTableList(); }

四、排序

需要使用这个字段

参数说明类型sorter排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 trueFunction 或boolean

第一步先在table中将列设置成可以排序的状态

columns: [ { title: "id", dataIndex: "id", // 列数据在数据项中对应的 key sorter:true }, ]

设置成功会出现这个图标，这个table组件的排序有三种状态：升序（ascend）、降序（descend）、不做排序 和后端约定好接口请求字段，通过table事件来判断用户的点击操作，再去请求数据即可。

tableChange(pagination, filters, sorter) { const { current, pageSize } = pagination; this.pagination.current = current; this.pagination.pageSize = pageSize; this.getList(); if (sorter.order) { // console.log(sorter.order); const { field, order } = sorter; this.sort = field; // 排序的数据 this.sortType = order; // 排序方式 this.getList(); } else { console.log("不做排序"); this.sort = ""; this.sortType = ""; this.getList(); } }

五、插槽使用 如果想在table中显示一些自定义的元素，可以使用插槽，如下： 先在columns中定义好插槽的名字，插槽名和数据名最好一致：

const columns = [ { dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' }, }, }

然后在html中去写插槽元素，可以是任何标签容器，只要插槽名一致即可：

<a-table :columns="columns" :data-source="data"> <a slot="name" slot-scope="text">{{ text }}</a> </a-table>