解决el-table排序sortable只排序当前页问题

el-table-column中添加sortable只是让每页数据单独排序,没有把所有数据进行排序,可以通过sort-change事件解决。

1、首先在需要排序的列上加sortable="custom"

javascript 复制代码
 <el-table-column
        prop="date"
        label="日期"
        width="180"
        sortable="custom">
 </el-table-column>

2、在el-table中加@sort-change="sortChange"

javascript 复制代码
 <el-table
      :data="tableData"
      style="width: 100%"
      @sort-change="sortChange">

3、最后添加排序方法sortChange,其中column.prop是属性名,column.order是排序方式

javascript 复制代码
sortChange(column){ 
        var type="";
        for(var i=0;i<this.tableData.length;i++){
          if(this.tableData[i][column.prop]!=null&&this.tableData[i][column.prop]!=undefined&&this.tableData[i][column.prop]!=''){
            type=typeof(this.tableData[i][column.prop]);
            break;
          }
        }
        if(this.tableData.length>0&&type!=""){
          if(column.order=="ascending"){
            this.tableData=this.tableData.sort((a,b)=>{
              if(a[column.prop]==undefined||a[column.prop]==null){
                a[column.prop]='';
              } 
              if(b[column.prop]==undefined||b[column.prop]==null){
                b[column.prop]='';
              }
              if(type=="number"){
                return a[column.prop]-b[column.prop]
              }else{
                return a[column.prop].localeCompare(b[column.prop])
              }
              })
          }else if(column.order=="descending"){
            this.tableData=this.tableData.sort((a,b)=>{
              if(a[column.prop]==undefined||a[column.prop]==null){
                a[column.prop]='';
              } 
              if(b[column.prop]==undefined||b[column.prop]==null){
                b[column.prop]='';
              }
              if(type=="number"){
                return b[column.prop]-a[column.prop]
              }else{
                return b[column.prop].localeCompare(a[column.prop])
              }               
            })
          }
        }
      },
相关推荐
珍宝商店34 分钟前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown35 分钟前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip2 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿2 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.3 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰3 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息3 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC4 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi
卷Java4 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19985 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos