详解IView表格的内外部sort排序，filter筛选方法

详解IView表格的内外部sort排序，filter筛选方法

​ IView框架（https://www.iviewui.com/） 是一套基于 Vue.js 的高质量UI 组件库，整体的效果还是非常好看的。但是其中的表格组件虽然没有bootstrap-table的组件好用，但是也能够满足基本的需求。

​ 这次我使用的是sortMethod，filterMethod方法。这两个方法在官方文档中只是几句话略过，没有特别详细的解释。在官方的github中看到过相关的提问，但是其回答让人看起来一头雾水。这里我自己琢磨了一下这两个方法的使用，对每个参数都有详细的解释。
​

内部排序sortMethod方法：

Date	Name	Age	Address
2016-10-01	Jim Green	24	London No. 1 Lake Park
2016-10-02	Joe Black	30	Sydney No. 1 Lake Park
2016-10-04	Jon Snow	26	Ottawa No. 2 Lake Park

官方释义：

排序 #

​ 通过给 columns 数据的项，设置 sortable: true，即可对该列数据进行排序。

排序默认使用升序和降序，也可以通过设置属性 sortMethod 指定一个自定义排序函数，接收三个参数 a 、 b 和 type。

通过给某一列设置 sortType 可以在初始化时使用排序。

​ 如果使用远程排序，可以设置 sortable: 'custom'，然后在触发排序事件 @on-sort-change后，进行远程排序，并手动设置新的 data，详见 API。

注意，排序并不会影响到源数据 data。

根据官方的提示，我们可以知道sortMethod分别接受a,b,type三个参数

​ a:比较的第一值

​ b:比较的第二个值

​ type:非常重要的值，desc倒序 asc顺序

​ 我们需要根据自己的需求设置筛选的条件，然后设置不同的排序方法返回的数值，即可完成自定义排序

下面的例子就是进行时间的筛选：

{
   
  title: '创建时间',
  key: 'datetime',
  sortable: true,
  width: 150,
  sortMethod: function (a,b,type) {
   
    let at = new Date(a);
    let bt = new Date(b);
    if(type === 'desc'){
   
      return at>bt?bt:at;
    }
    else return at>bt?at:bt;
  }
},

外部排序on-sort-change方法：

​ 随着需求的提升，项目并不满足于仅仅是当前页面排序，更为需要的是进行全局的排序。点击排序按钮，可以调用自己写的排序方法，进行数据重新排列。

​ 下面为on-sort-change方法在官方api中的释义：

事件名	说明	返回值
on-sort-change	排序时有效，当点击排序时