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

心已赠人 2023-02-22 07:56 20阅读 0赞

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

#### 一、table组件官方文档[地址][Link 1] ####

#### 二、举个栗子，定义一个带分页器的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效果是这样的  
    ![在这里插入图片描述][20200702124630422.png]

可自定义分页器，自定义分页器的效果如下：  
![在这里插入图片描述][20200702124706182.png]

*  @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();
    }

#### 四、排序 ####

需要使用这个字段

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>sorter</td> 
   <td>排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true</td> 
   <td>Function 或boolean</td> 
  </tr> 
 </tbody> 
</table>

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

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

设置成功会出现这个图标，这个table组件的排序有三种状态：升序（ascend）、降序（descend）、不做排序  
![在这里插入图片描述][20200702125543744.png]  
和后端约定好接口请求字段，通过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中显示一些自定义的元素，可以使用插槽，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]  
先在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>

[Link 1]: https://www.antdv.com/components/table-cn/
[20200702124630422.png]: https://img-blog.csdnimg.cn/20200702124630422.png
[20200702124706182.png]: https://img-blog.csdnimg.cn/20200702124706182.png
[20200702125543744.png]: https://img-blog.csdnimg.cn/20200702125543744.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702130011358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw=,size_16,color_FFFFFF,t_70