本文共 1389 字，大约阅读时间需要 4 分钟。

1、table部分代码

2、增加排序（仅需在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)。

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

                   
    
                  
                       
     
                          筛选                  
                       
     
                          重置                  
                     
    
                
                
   

效果图如下：

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

转载地址：http://bmlbi.baihongyu.com/