1.html
<el-table
v-loading="tableLoading"
ref="multipleTables"
:data="tableData"
tooltip-effect="dark"
@sort-change="sort"
:sort-orders="['descending','ascending']"
:default-sort = "{prop: 'customerPV', order: 'descending'}"
sortable="custom"
style="width: 100%;">
<el-table-column label="信息明细">
<el-table-column label="序号" width="45">
<template slot-scope="scope">
<span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column prop="customerUV" sortable label="xxxx" width="130"></el-table-column>
</el-table-column>
</el-table>
2. js
save_sort :'descending',
save_number:1
// 三种状态 正序 倒序 默认
created(){
if(this.$route.query) {
//上一页带过来得数据 进行倒序 切割
this.tableDataDay.push(this.$route.query)
this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder('customerPV'))
this.total = this.tableDataList.length
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
}
},
methods: {
// 降序
DescendingOrder(c){
return (a,b)=>{
return b[c] - a[c]
}
},
// 升序
AscendingOrder(c){
return (a,b)=>{
return a[c] - b[c]
}
},
sort({column, prop, order}){
//关键步骤 点击默认状态时候 让默认状态为上一次状态得取反
if(order == 'descending'){
this.save_sort= 'ascending'
this.save_number=1
}else if(order== 'ascending'){
this.save_sort= 'descending'
this.save_number=2
}else{
this.save_sort=null
}
this.$nextTick(()=>{
this.page = 1;
})
// 排序 大到小
if(this.save_sort== null){
this.$nextTick(()=>{
if(this.save_number==1){
this.tabletDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.AscendingOrder(prop))
this.total = this.tableDataList.length
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
}
if(this.save_number==2){
this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder(prop))
this.total = this.tableDataList.length
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
}
})
}else if(this.save_sort== 'ascending'){
// 排序 小到大
this.$nextTick(()=>{
this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder(prop))
this.total = this.tableDataList.length
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
})
}else{
this.$nextTick(()=>{
this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.AscendingOrder(prop))
this.total = this.tableDataList.length
this.tableData = this.tableDataList.slice(
Number(this.page - 1) * 10,
Number(this.page) * 10
)
})
}
this.save_sort = order;
},
currentChange(val){
this.page = val
this.tableData = this.tableDataList.slice(
Number(val - 1) * 10,
Number(val) * 10
)
}
}
网友评论