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

 更新时间:2022年07月29日 11:00:06   作者:节省钱  
这篇文章主要介绍了element-table如何实现自定义表格排序,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

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

相关文章

  • el-form-item prop属性动态绑定不生效问题及解决

    el-form-item prop属性动态绑定不生效问题及解决

    这篇文章主要介绍了el-form-item prop属性动态绑定不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue项目配置router.js流程分析讲解

    Vue项目配置router.js流程分析讲解

    第一次写Vue项目,要用到router.js,看了一下官方文档,还是很懵逼,不知道怎么配置,又去看视频查资料,最后终于搞定了。话不多说,先上代码,我再讲一些要注意的细节
    2022-12-12
  • 前端vue3搭建超详细指南(快速上手搭建)

    前端vue3搭建超详细指南(快速上手搭建)

    这篇文章主要介绍了使用Vue 3和Element-plus搭建前端项目的过程,包括项目搭建、Element-plus安装和引入、axios安装、sass使用、app.vue配置、组件创新、路由配置以及使用辅助插件来提高开发效率,需要的朋友可以参考下
    2025-02-02
  • 详解从Vue-router到html5的pushState

    详解从Vue-router到html5的pushState

    这篇文章主要介绍了详解从Vue-router到html5的pushState,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 利用Vue实现卡牌翻转的特效

    利用Vue实现卡牌翻转的特效

    这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面,采用了卡牌翻转的形式。文中的实现方法讲解详细,快跟随小编一起学习一下吧
    2022-02-02
  • Vue iframe更改src后页面未刷新问题解决方法

    Vue iframe更改src后页面未刷新问题解决方法

    这篇文章主要介绍了Vue iframe更改src后页面未刷新问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue中vue-cli项目报错sockjs.js报错问题

    vue中vue-cli项目报错sockjs.js报错问题

    这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题,具有很好的参考价值,希望对大家有所帮助。
    2022-12-12
  • Vue2.0实现购物车功能

    Vue2.0实现购物车功能

    这篇文章主要为大家详细介绍了Vue2.0实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue动态类的几种使用方法总结

    Vue动态类的几种使用方法总结

    这篇文章主要介绍了Vue动态类的几种使用方法总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 对类Vue的MVVM前端库的实现代码

    对类Vue的MVVM前端库的实现代码

    这篇文章主要介绍了对类Vue的MVVM前端库的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09

最新评论