详解IView表格的内外部sort排序，filter筛选⽅法
详解IView表格的内外部sort排序，filter筛选⽅法
这次我使⽤的是sortMethod，filterMethod⽅法。这两个⽅法在官⽅⽂档中只是⼏句话略过，没有特别详细的解释。在官⽅的github中看到过相关的提问，但是其回答让⼈看起来⼀头雾⽔。这⾥我⾃⼰琢磨了⼀下这两个⽅法的使⽤，对每个参数都有详细的解释。
内部排序sortMethod⽅法：
Date Name Age Address
2016-10-01Jim Green24London No. 1 Lake Park
2016-10-02Joe Black30Sydney No. 1 Lake Park
2016-10-04Jon Snow26Ottawa 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;
}
el 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'
el this.sort ='DESC'
this.startQuery();
}
这样就可以做到外部排序。
内部筛选filterMethod⽅法：
Date Name Age Address
2016-10-01Jim Green24London No. 1 Lake Park
2016-10-02Joe Black30Sydney No. 1 Lake Park
2016-10-04Jon Snow26Ottawa No. 2 Lake Park
官⽅释义：
个人发展计划
筛选
通过给 columns 数据的项，设置 filters，可进⾏筛选，filters 接收⼀个数组，详见 Demo 和 API。
必须指定⼀个筛选函数 filterMethod 才可以进⾏筛选，filterMethod 传⼊两个参数 value 和 row，详见 Demo 和 API。
如果指定 filterMultiple: fal，则使⽤单选，默认为多选。
注意，筛选并不会影响到源数据 data。
表格我的本意是能够显⽰⼀下其中的⽅法，但是这⾥⽆法进⾏运⾏操作，可以点击相应的链接去官⽅⽂档看看效果。
filters是⾃⼰设定的筛选选项，label为显⽰在上⽅筛选项的值，如上图中的address下拉框中的选项，value为设置的每个选项的值，⽤于filterMethod进⾏筛选。
filterMethod接受两个参数分别是value和row：
value：value是filters中的每个选项的value值
row：每⼀⾏的⼀个对象，⼀般为row.‘key’，这⾥的key应被替换为⾃⼰写的key值，如下⾯例⼦中的st
atus。
下⾯的例⼦是进⾏状态的筛选，如果当前列的填充值等于设置好的value值，那么就会通过筛选显⽰反之则不会显⽰。
{
title:'状态',
key:'status',
width:100,
filters:[
{
label:'pending',
value:'pending'
},
吸引客流的25个技巧{
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:fal,
孟云卿filterRemote:function(value, row){
that.query.isReview = value
that.loadList()
}
报错： isReview是⼀个未定义的值，这个错误在研究之后发现是因为this作⽤域导致的问题，但是这个错误在上⼀个代码中未出现。这⾥的不同还没有发现是为什么，但是这个问题拥有解决⽅法
vue.runtime.esm.js?6e6d:1888 TypeError: Cannot t 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)
绿豆芽的生长过程观察日记iginal._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版，虽然这些版本没有原版强⼤，但简单的增删改查已经够⽤了。
在系统中还集成有前端分页和后端分页功能。
