解决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])
              }               
            })
          }
        }
      },
相关推荐
slim~5 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼10 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己22 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
尚学教辅学习资料2 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design