iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >element-table如何实现自定义表格排序
  • 638
分享到

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

2024-04-02 19:04:59 638人浏览 八月长安
摘要

目录element-table 自定义表格排序第一步第二步原理element-table表格 自定义排序规则项目需求使用element-table 自定义表格排序 第一步 在el-t

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

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

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

--结束END--

本文标题: element-table如何实现自定义表格排序

本文链接: https://www.lsjlt.com/news/165588.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • element-table如何实现自定义表格排序
    目录element-table 自定义表格排序第一步第二步原理element-table表格 自定义排序规则项目需求使用element-table 自定义表格排序 第一步 在el-t...
    99+
    2024-04-02
  • Vue+element自定义指令如何实现表格横向拖拽
    目录element自定义指令实现表格横向拖拽自定义指令设置及常用自定义指令指令定义函数提供了几个钩子函数(可选)下面分享几个实用的 Vue 自定义指令element自定义指令实现表格...
    99+
    2022-11-13
    Vue element 自定义指令 表格横向拖拽
  • Element如何实现复杂table表格结构
    这篇文章主要介绍“Element如何实现复杂table表格结构”,在日常操作中,相信很多人在Element如何实现复杂table表格结构问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Element如何实现复杂...
    99+
    2023-07-05
  • 用 C++ lambda 表达式自定义排序规则如何实现?
    使用 c++++ lambda 表达式自定义排序规则,可灵活定义排序逻辑。语法为:[capture list](parameters) -> return type { body ...
    99+
    2024-04-17
    c++ lambda 排列
  • element-ui自定义表格如何给input双向绑定数据
    目录问题描述先看一下,错误的代码实现的效果看一下官方的示例问题描述 有个项目需求点击添加按钮添加一行,我采用的是自定义表格,刚开始写好之后,点击添加,可以实现,但是却发现输入框不能输...
    99+
    2022-11-13
    element-ui自定义表格 input双向绑定数据 input双向绑定
  • element Table表格组件多字段(多列)排序方法
    目录需求:遇到的问题:解决:需求: element表格多列排序,点击日期的排序,然后再点击姓名的排序,将两个排序字段传给后端排序 遇到的问题: element的Table组件只支持...
    99+
    2024-04-02
  • mybatis-plus自定义排序的实现
    目录需求:1.导入依赖2.配置文件3.创建分页需要的缓存4.创建实体类5.mapper6.测试7.结果需求: 先时间升序排序,相同的时间在按状态排序,状态的顺序为1 在线 4 潜伏 ...
    99+
    2023-01-09
    mybatis-plus 自定义排序 mybatis-plus 排序
  • excel表格如何自动排序
    在Excel中,可以使用排序功能自动对表格中的数据进行排序。具体步骤如下:1. 选中需要排序的数据范围。可以是一个单列、多列或整个表...
    99+
    2023-09-29
    excel
  • Vue+Element树形表格实现拖拽排序示例
    目录安装sortablejs在需要的页面引入表格加上row-key="id"树形表格排序(树结构)方法介绍注意点结语今天给大家分享一下树形表格拖拽排序,树形表格排...
    99+
    2022-11-13
    Vue Element树形表格拖拽排序 Vue Element表格拖拽
  • Vue中Element的table多选表格如何实现单选
    目录Element的table多选表格实现单选vue table单选逻辑Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2...
    99+
    2024-04-02
  • DataGridView中怎么实现自定义排序
    要在DataGridView中实现自定义排序,可以通过实现DataGridView的SortCompare事件来实现。SortCom...
    99+
    2024-03-12
    DataGridView
  • MySQL中如何通过循环实现自定义排序
    在MySQL中,可以通过循环实现自定义排序的方法是使用用户定义变量(user-defined variables)来实现。以下是一个...
    99+
    2024-04-30
    MySQL
  • vue中element table表格请求后台排序的示例分析
    这篇文章主要介绍了vue中element table表格请求后台排序的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、Elemen...
    99+
    2024-04-02
  • vue中elementUI table如何实现自定义表头和行合并
    这篇文章主要介绍vue中elementUI table如何实现自定义表头和行合并,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、自定义表头代码如下,其实就是分了两部分,表格主数据是...
    99+
    2024-04-02
  • element table 表格控件实现单选功能
    项目中实现 table 表格控件单选功能,如图: 基本代码如下: 1、template 代码中: <el-table :data="tableData" bo...
    99+
    2024-04-02
  • Python3怎么实现自定义比较排序
    本篇内容介绍了“Python3怎么实现自定义比较排序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!自定义比较排序/运算符Python3和Py...
    99+
    2023-06-29
  • html如何实现自定义列表
    小编给大家分享一下html如何实现自定义列表,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!定义列表不仅仅是一列项目,而是项目及其注释的组合。列表以 <dl&...
    99+
    2023-06-17
  • MySQl中如何自定义时间排序
    今天就跟大家聊聊有关MySQl中如何自定义时间排序,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。MySQl时间自定义排序 SELEC...
    99+
    2024-04-02
  • jquery如何实现表格行拖动排序
    这篇文章主要介绍了jquery如何实现表格行拖动排序,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下引入JS<script src="jq...
    99+
    2023-06-29
  • vue实现自定义表格工具扩展
    本文实例为大家分享了vue自定义表格工具扩展的具体代码,供大家参考,具体内容如下 工具组件 <template>     <div class="right-btn...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作