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

el-table-column数据全量排序解决方案

原创已于 2024-09-10 08:56:06 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2024-09-06 15:18:12 首次发布

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

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

 <el-table-column
        prop="date"
        label="日期"
        width="180"
        sortable="custom">
 </el-table-column>

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

 <el-table
      :data="tableData"
      style="width: 100%"
      @sort-change="sortChange">

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

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