客户需求:给排班的人排序,没有的放到下面。
解决方法:先按照elementui文档上操作,加上sortable,发现目标列如果两行之间有空的情况,排序就失效了。只能通过自定义排序来完成
代码:
//html
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;"
//排序方法
@sort-change="sortChange"
//在请求数据时,更改默认排序。
:default-sort = sortRule
>
//data
sortRule:{prop:'goTime',order:'ascending'}, //这是我的目标排序列
tabData:''//备用列表,在调用数据时使用
//排序方法
sortChange(column){
if(column.order!==null&& column.prop === 'goTime'){
var data = [];
for(var i = 0;i<this.dataList.length;i++){
if(this.dataList[i].goTime===null){
data.push(this.dataList[i])
}else{
data.unshift(this.dataList[i])
}
}
this.dataList = data;
}
if(column.order===null){
this.dataList = this.tabData
}
this.sortRule.order = column.order;
this.sortRule.prop = column.prop
},
//请求数据方法
getDataList() {
this.dataListLoading = true;
this.$http({
url: this.$http.adornUrl("/zng/busDriver/list"),
method: "get",
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
lineName: this.dataForm.lineName,
planTime: this.dataForm.planTime,
direction: this.dataForm.direction,
busNo: this.dataForm.busNo,
}),
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.list;
this.tabData = data.list;
this.totalPage = data.totalCount;
if(this.sortRule.order!==null&&this.sortRule.prop==='goTime'){
this.sortChange(this.sortRule)
}
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
这样就完美解决了这个bug。