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
    },

 

posted @ 2022-05-17 12:02  冰晨之露  阅读(268)  评论(0编辑  收藏  举报