element-table 自定义表格排序

第一步

在el-table中加入 @sort-change=“sort_change” 事件,sort_change为自定义的排序方法

第二步

在el-table-colum中加入sortable=“custom”,使用了该属性之后当前列就可以进行排序且排序时会调用sort_change方法进行自定义排序

sortFun(attr, rev){
      // 第一个参数传入info里的prop表示排的是哪一列,第二个参数是升还是降排序
      if (rev) {
        rev = 1;
      } else {
        rev =  -1;
      }
      let that = this;
      return function (a, b) {
        let res = 0;
        for (let i = 0; ;i  ) {
          if (!a[attr][i] || !b[attr][i]) {
            res = a[attr].length - b[attr].length;
            break;
          }
          let char1 = a[attr][i];
          let char1Type = that.getChartType(char1);
          let char2 = b[attr][i];
          let char2Type = that.getChartType(char2);
          // 类型相同的逐个比较字符
          if (char1Type[0] === char2Type[0]) {
            // console.log('字符类型相同');
            if (char1 === char2) {
              res = 0;
              // console.log('值全等', res);
              continue;
            } else {
              if (char1Type[0] === 'zh') {
                res = char1.localeCompare(char2);
                // console.log('a的字符类型为中文', res);
              } else if (char1Type[0] === 'en') {
                res = char1.charCodeAt(0) - char2.charCodeAt(0);
                // console.log('a的字符类型为英文', res);
              } else {
                res = char1 - char2;
                // console.log('a的字符类型为数字', res);
              }
              // console.log('值不相等比较的结果', res);
              break;
            }
          } else {
            // 类型不同的,直接用返回的数字相减
            var num1 = char1Type[1];
            var num2 = char2Type[1];
            res = num1 - num2;
            break;
          }
        }
        return res * rev;
      };
    }
    sort_change(column) {
      // this.currentPage = 1;// return to the first page after sorting
      if (column.prop === 'configTemplateName') {
        // 对展示的源数据进行重新排序
         this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
      } else if (column.prop === 'configTemplatePattern') {
        // 对展示的源数据进行重新排序
        this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
      }
      // 排序完显示到第一页
      this.handleCurrentChange(this.currentPage);
    }
    getChartType(char) {
      // 数字可按照排序的要求进行自定义 ;数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)
      if (/^[u4e00-u9fa5]$/.test(char)) {
        return ['zh', 3];
      }
      if (/^[a-zA-Z]$/.test(char)) {
        return ['en', 2];
      }
      if (/^[0-9]$/.test(char)) {
        return ['number', 1];
      }
      return ['others', 4];
    }
   handleCurrentChange(val) {
      this.configTempLoading = true;
      this.currentPage = val;
      this.configTemplatesView = this.configTemplatesFilter.filter(data => !this.queryParam.configTemplateName || data.configTemplateName.toLowerCase().includes(this.queryParam.configTemplateName.toLowerCase())).slice((val - 1) * this.pageSize, val * this.pageSize);
      this.configTempLoading = false;
    }

原理

当触发排序时判断是升序还是降序然后使用sort方法对要展示的源数据数组(未分页过滤的数据)进行重新排序;然后再进行分页过滤进行数据展示

注意:当我们排序完之后再次点击同一个排序图标时column.order上的值时null;此时需要考虑是否恢复排序前的数据展示;最好使用一个中间变量来保存排序前的数据,这样不需要排序时直接使用中间变量进行展示即可 

element-table表格 自定义排序规则

项目需求

前端做排序,后台返回的数据有合计一项,排序时,合计始终在最后一行

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用

在这里插入图片描述

在这里插入图片描述

@sort-change='sortChange'
   <el-table-column
      prop="revPar"
      align='center'
      sortable="custom"  
      label="RevPAR"
      width="110">
    </el-table-column>
sortChange(column){
      let arr = []
      this.tableData.forEach(val=>{
        arr.push(val)
      })
      if(column.order=='descending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(String(a[fieldName]).indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合计') {
            aVal = -9999
          }
          if (b.name == '合计') {
            bVal = -9999
          }
          return bVal - aVal
        })
      }else if(column.order=='ascending'){
        this.tableDatalist = arr.sort((a, b) => {
          let aVal =0
          if(a[fieldName].indexOf('%')!=-1){
            aVal = Number(a[fieldName].split('%')[0])   //因为数据中有%,没有的话可以去掉
          }else{
           aVal = Number(a[fieldName])
          }
          let bVal =0
          if(b[fieldName].indexOf('%')!=-1){
            bVal = Number(b[fieldName].split('%')[0])
          }else{
           bVal = Number(b[fieldName])
          }
          if (a.name == '合计') {
            aVal = 9999
          }
          if (b.name == '合计') {
            bVal = 9999
          }
          return aVal - bVal
        })
      }else{
        this.tableDatalist = this.tableData
      }
    },

具体操作根据业务需求自行修改

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

element-table如何实现自定义表格排序的更多相关文章

  1. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  2. react中useState使用:如何实现在当前表格直接更改数据

    这篇文章主要介绍了react中useState的使用:如何实现在当前表格直接更改数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. Pandas如何将表格的前几行生成html实战案例

    这篇文章主要介绍了Pandas如何将表格的前几行生成html实战案例,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  4. Ant Design Vue 修改表格头部样式的详细代码

    这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API,类型是一个函数,本文通过完整代码给大家详细讲解,需要的朋友可以参考下

  5. JavaScript实现动态加载删除表格

    这篇文章主要为大家详细介绍了JavaScript实现动态加载删除表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. element-table如何实现自定义表格排序

    这篇文章主要介绍了element-table如何实现自定义表格排序,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  7. vue如何自定义地址设置@

    这篇文章主要介绍了vue如何自定义地址设置@,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  8. react.js组件实现拖拽复制和可排序的示例代码

    这篇文章主要介绍了react.js组件实现拖拽复制和可排序的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. jQuery+ajax读取json数据并按照价格排序示例

    这篇文章主要介绍了jQuery+ajax读取json数据并按照价格排序,涉及jQuery基于ajax动态获取json文件数据并进行数据遍历与排序的相关操作技巧,需要的朋友可以参考下

  10. python字典排序浅析介绍

    在数据处理时,为了方便统计经常使用字典存储数据。python中的字典是‘键:值’对的可变序列。排序时可以指定根据键或者是值为对象进行排序。用到的函数是sorted(),需要的朋友们下面随着小编来一起学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部