详解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	排序时有效，当点击排序时触发	column：当前列数据key：排序依据的指标order：排序的顺序，值为 asc 或 desc

​ 使用方法：

{
  title: '创建时间',
  key: 'dt',
  width: 150,
  sortable: true,
  sortMethod:function(a,b,type){
  }
}

<Table width="1200" height="528" stripe border :columns="Columns" :data="this.Data" :loading="loading" @on-sort-change='changeSort' >Table>

​ column排序的列上一定要写上sorable:true，其中sortMethod方法可以不写，在这里写上是为了避免调用单页面的sortMethod方法，进行排序造成排序逻辑的混乱（当数据较少时不知进行了单页面排序还是后端排序）

​ @on-sort-change:‘方法名’，其中的方法名即为写好的方法，这里我写的方法是进行倒序以及顺序的切换，改变sort的值后进行后台的重新获取。

changeSort(){
  if(this.sort === 'DESC')
    this.sort = 'ASC'
  else this.sort = 'DESC'
  this.startQuery();
}

​ 这样就可以做到外部排序。

内部筛选filterMethod方法：

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 数据的项，设置 filters，可进行筛选，filters 接收一个数组，详见 Demo 和 API。

必须指定一个筛选函数 filterMethod 才可以进行筛选，filterMethod 传入两个参数 value 和 row，详见 Demo 和 API。

如果指定 filterMultiple: false，则使用单选，默认为多选。

注意，筛选并不会影响到源数据 data。

​ 表格我的本意是能够显示一下其中的方法，但是这里无法进行运行操作，可以点击相应的链接去官方文档看看效果。

filters是自己设定的筛选选项，label为显示在上方筛选项的值，如上图中的address下拉框中的选项，value为设置的每个选项的值，用于filterMethod进行筛选。

filterMethod接受两个参数分别是value和row：

​ value：value是filters中的每个选项的value值

​ row：每一行的一个对象，一般为row.‘key’，这里的key应被替换为自己写的key值，如下面例子中的status。

下面的例子是进行状态的筛选，如果当前列的填充值等于设置好的value值，那么就会通过筛选显示反之则不会显示。

{
  title: '状态',
  key: 'status',
  width: 100,
  filters: [
    {
      label: 'pending',
      value: 'pending'
    },
    {
      label: 'running',
      value: 'running'
    },
    {
      label: 'completed',
      value: 'completed'
    }
  ],
  filterMethod (value, row) {
    return row.status === value;
  }
}

外部筛选filterRemote方法：

​ 筛选方法是表格之中常见的方法，iview中使用单页筛选的方法并不满足于用户的需求。所以iview提供了外部过滤的接口filterRemote。

属性	说明	类型	默认值
filterRemote	使用远程过滤	Function	-

使用方法：

{
  title: '状态',
  key: 'status',
  width: 100,
  filters: [
    {
      label: 'pending',
      value: 'pending'
    },
    {
      label: 'running',
      value: 'running'
    },
    {
      label: 'completed',
      value: 'completed'
    }
  ],
  filterRemote: function (value,row) {
    this.status = value;
    this.startQuery();
  }
} 

​ 筛选功能默认是多选，这里的value是一个数组，图为未选取时

//根据选择不同value的值会进行改变
value = [ 'running', 'pending', 'completed' ]//全选时
value = [ 'running', 'pending' ]//选择running和pending
value = [ 'running' ]//选择running
value = []//不进行选择或者点击重置

filterRemote报错 this未定义，作用域问题

​ 最近在新的项目中使用filterRemote时出现一个问题，使用以下代码时，出现报错：

 // 代码
 filters: [
            {
              label: '开启',
              value: 1
            },
            {
              label: '关闭',
              value: 0
            }
          ],
 filterMultiple: false,
 filterRemote: function (value, row) {
   that.query.isReview = value
   that.loadList()
 }

报错： isReview是一个未定义的值，这个错误在研究之后发现是因为this作用域导致的问题，但是这个错误在上一个代码中未出现。这里的不同还没有发现是为什么，但是这个问题拥有解决方法

vue.runtime.esm.js?6e6d:1888 TypeError: Cannot set property 'isReview' of undefined
    at VueComponent.filterRemote (distribution-management.vue?e643:220)
    at VueComponent.filterOtherData (iview.js?6587:23432)
    at VueComponent.handleFilter (iview.js?6587:23448)
    at VueComponent.handleFilterSelect (iview.js?6587:23466)
    at VueComponent.handleSelect (iview.js?6587:23890)
    at click (iview.js?6587:39516)
    at invokeWithErrorHandling (vue.runtime.esm.js?6e6d:1854)
    at HTMLLIElement.invoker (vue.runtime.esm.js?6e6d:2179)
    at HTMLLIElement.original._wrapper (vue.runtime.esm.js?6e6d:6911)

解决方法：

// 在vue的data return前写入that
 data () {
    let that = this
    return {...}
    }
// 将filterRemote的代码改为即可
 filterRemote: function (value, row) {
            that.query.isReview = value
            that.loadList()
          }

总结

iview的表格筛选及排序功能没有想象中的强大，如果使用后端分页的话只会对当前页进行筛选和排序，如果需要对全局进行筛选和排序的建议另写筛选和排序方法改变全局显示的数据。如果显示所有页面就没有问题（暂时未发现表格中包含前端分页功能），但当数据过多就无能为力。

在这里推荐一下bootstrap-table，一个强大的集成各种功能的表格工具。
已经有vue及react版，虽然这些版本没有原版强大，但简单的增删改查已经够用了。
在系统中还集成有前端分页和后端分页功能。