前端分页el-table中的sortable按修改时间跨页排序

在el-table-column中使用sortable就可以实现升序和降序，但是在前端分页中是只能按照当前分页排序，所以用了@sort-change

 

<!-- 表格 -->
<el-table
:row-class-name="tableRowClassname"
v-loading="loading"
:data="
  allList.slice(
	(currentPage - 1) * pageSize,
	currentPage * pageSize
  )
"
height="700"
@sort-change="changeSort"
border
stripe
class="mt-10"
>
	<el-table-column prop="name" label="店铺名"></el-table-column>
	<el-table-column
	  prop="storenumber"
	  label="店铺号" width="70"
	></el-table-column>
	<el-table-column prop="vlan1" label="ip地址"></el-table-column>
	<el-table-column prop="region" label="区域" width="70"></el-table-column>
	<el-table-column
	  prop="loopback"
	  label="loopback IP"
	></el-table-column>
	<el-table-column
	  prop="modify_time"
	  label="修改日期"
	  sortable
	></el-table-column>
	<el-table-column prop="opendate" label="开店日期"></el-table-column>
</el-table>

获取的数据修改时间是datetime格式的，因此要把T去掉，我这里简单把T替换掉，如果有更多的需求可以用moment转换

async getAllList() {
  this.loading = true;
  await this.$request({
	url: "/cmdb/searchBySome/",
	method: "get",
	params:{
	  query:this.keywords
	}
  })
	.then(res => {
	  console.log(res.data)
	  res.data.map(item => {
		item.modify_time = item.modify_time.replace("T", " ");
	  });
	  this.allList=res.data
	  // console.log(this.allList)
	  this.total = this.allList.length;
	  this.currentPage = 1
	  this.loading = false;
	})
	.catch(err => {
	  this.loading = false;
	});
},

 而后写排序的方法，_.cloneDeep是lodash的深拷贝方法，npm安装之后 import _ from 'lodash' 导入

    changeSort(val){
      let sortData=_.cloneDeep(this.allList)
      if(val.order==="descending"){
        if(val.prop==="modify_time"){
          // console.log(val.prop)
          sortData.sort(this.sortKeys(val.prop,true))
          // console.log(sortData)
        }
      }else{
        if(val.prop==="modify_time"){
          sortData.sort(this.sortKeys(val.prop,false))
        }
      }
      this.allList=sortData
      // this.currentPage=1
    },
    // 升序降序
    sortKeys(key,order){
      if(order){
        return (val1,val2)=>{
          return val2[key] > val1[key] ? 1 : -1
        }
      }else{
        return (val1,val2)=>{
          return val2[key] < val1[key] ? 1 : -1
        }
      }
    }

然后就可以了，order的作用是区别升序降序

moment的可以参考下面的文章，不过我个人觉得有点麻烦

https://blog.csdn.net/yangfan_357/article/details/100140641