vue + antd项目中关于Table的那些事儿

引言：笔者为前端小白，本文章是笔者初涉前端vue+antd的第一和第二个项目中代码分享，仅供初学者参考。

概要：利用antd组件库的table组件完成数据按格式渲染，分页/翻页，排序，查询，筛选功能；

注意：本demo前端分页；

步入正题：

1、引入antd组件库

$ npm i --save ant-design-vue

2、按需引入table组件

import Vue from 'vue';
import { Table } from 'ant-design-vue';

Vue.use(Table)

3、调用组件完成简单的数据渲染和分页

4、增加排序（仅需在columns变量定义中增加排序规则）

const columns = [
  { title: "货品名称", dataIndex: "goods" },
  { title: "进货数量", dataIndex: "quantity", sorter: (a, b) => a.quantity - b.quantity, } },
  { title: "单价", dataIndex: "price" },
  { title: "剩余数量", dataIndex: "rest" },
  { title: "创建者", dataIndex: "creater" },
  { title: "创建日期", dataIndex: "createTime" },
  {
  {
    title: "操作",
    dataIndex: "operation",
    className: "column-operate",
    scopedSlots: { customRender: "operation" }
  }
];

排序方法：升序（假设排序列的detaIndex为key）

1）按内容有无/数字大小排序：sorter: (a, b) => a.key - b.key;

2）按内容长度排序：sorter: (a, b) => a.key.length - b.key.length;

3）按字母/姓名排序：sorter: (a, b) => a.key.localeCompare(b.key),

5、增加筛选和查询功能（关于筛选：官方文档的方法是指定几项作为筛选项，此处举例采用的是根据内容自动生成筛选项的方法）

            
                

                  
                  
                    筛选
                  
                  
                    重置
                  
                
                
            

效果图如下：

        

 

此外，antd的Table组件比较常用的还有固定列，这里需要注意的就是:scroll="{ x: 值}"，这个x对应的值不能超过滚动列宽度的和，笔者在用到的时候反复调整过，最后发现，太多的列容易出现遮挡问题，建议不要超过连续两列固定列，且如果表格不定宽度，最好给固定列指定宽度。

另外笔者还遇到合并行的需求，感觉用此组件过于麻烦，干脆自行table嵌套+v-for完成了，用起来很方便，此处就不赘述了。