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

本文链接：https://blog.youkuaiyun.com/qmzmzxk/article/details/81748422

本文详细介绍了如何在IView表格中使用sortMethod和filterMethod进行内部排序和筛选，同时讲解了外部排序的on-sort-change方法以及外部筛选的filterRemote方法，包括解决filterRemote中this未定义的常见问题。文章提供了具体的参数解析和示例，帮助开发者更好地理解和应用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详解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;
  }
},