element-ui中排序,
根据文档中有好几种排序方法,我这边由于排序的内容比较多,因此使用了自定义排序
<el-table v-loading="loading" class='courselist clearfix' ref="multipleTable" :data="list" @sort-change="fn" > <el-table-column label="学管师" width="200" align='center' sortable> <template slot-scope="scope" > <div> <div style="margin-left:10px;"> <p><span >{{scope.row.num}}</span></p> </div> </div> </template> </el-table-column> </el-table>
表格中的内容我只写了一项,实际上是很多的
表格每一项中加上sortable,可以展示排序的小图标。
上图中的方法fn,即为排序的方法
let arr=[] let arr1=[] let sort=[] for (let i = 0; i < this.list.length; i++) { if(val.column.label=='分配量'){ arr.push(Number(this.list[i].fp)) }else if(val.column.label=='未处理'){ arr.push(Number(this.list[i].state_0)) }if(val.column.label=='未接通'){ arr.push(Number(this.list[i].state_1)) } } console.log(arr);//获取排序的数组 if(val.order=='ascending'){ sort=arr.sort(function(x,y){ return x-y;//升序 }); }else{ sort=arr.sort(function(x,y){ return y-x;//降序 }); } console.log(sort);//排序好的数组 sort.forEach(a => { this.list.forEach(b => {//list为table的表格数据 if(val.column.label=='分配量'){ if(a==b.fp){ arr1.push(b) } }else if(val.column.label=='未处理'){ if(a==b.state_0){ arr1.push(b) } }if(val.column.label=='未接通'){ if(a==b.state_1){ arr1.push(b) } } }); }); console.log(arr1);//arr1即为排序好的总数据 let a=arr1.filter(this.recive)//recive方法即为数组去重 this.list=a
数组去重
recive(val,index,self){ return self.indexOf(val)===index },