Ant Design Vue ：table 组件 自定义分页器、排序、插槽使用_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>
1
2
3
4
5
6
7
8
9

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

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

   columns: [
        {
          title: "id",
          dataIndex: "id"  // 列数据在数据项中对应的 key
        },
   ]
1
2
3
4
5
6

• :dataSource=“lists”
  数据数组

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

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

• @change=“tableChange”
  分页、排序、筛选变化时触发

methods:{
tableChange(e){
	 console.log(e)  // 分页、排序、筛选变化时的数据
}
1
2
3
4

三：自定义分页器

在data中定义：

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

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

onChange(){
	const { current, pageSize } = e;
    this.pagination.current = current;
    this.pagination.pageSize = pageSize;
    this.getTableList();
}
1
2
3
4
5
6

四、排序

需要使用这个字段

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

   columns: [
        {
          title: "id",
          dataIndex: "id",  // 列数据在数据项中对应的 key
          sorter:true
        },
   ]
1
2
3
4
5
6
7

设置成功会出现这个图标，这个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();
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

五、插槽使用
如果想在table中显示一些自定义的元素，可以使用插槽，如下：

先在columns中定义好插槽的名字，插槽名和数据名最好一致：

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
}
1
2
3
4
5
6
7

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

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