• el-table表格进行排序 & 清除排序和清除排序箭头的高亮图标


    el-table表格进行排序 & 清除排序和清除排序箭头的高亮图标

    1、进行排序

    效果图

    在这里插入图片描述

    代码

    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。

    • sortable : 对应列是否可以排序,如果设置为 ‘custom’,则代表用户希望远程排序,需要监听 Table 的 sort-change 事件。字符串/布尔值,true, false, ‘custom’ 默认false
    • default-sort : 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序。 对象类型。order: ascending-升序, descending-降序。如果只指定了prop, 没有指定order, 则默认顺序是ascending。

    注释

    • row-dblclick : 当某一行被双击时会触发该事件, 参数 (row, column, event)
    • border : 是否带有纵向边框 ,布尔值,默认false
    • max-height : Table 的最大高度。合法的值为数字或者单位为 px 的高度。 字符串/数字类型 , —
    • sort-change : 当表格的排序条件发生变化的时候会触发该事件 ,参数 { column, prop, order }
    2、清除排序和清除排序箭头的高亮图标

    排序后,切换日期或其他条件重新渲染表格数据,这时候需要去除排序箭头高亮样式

    两步解决以上问题

    1、第一步:增加ref=“table1”

    <el-table
         :row-class-name="tableRowClassName"
         :data="resultAreaList1"
         style="width: 100%"
         @sort-change="changeTableSort1($event)"
         ref="table1"
    >
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2、第二步,clearSort(如果表格用了v-if控制,先判断一下表格是否存在)

    if (this.$refs.table1) {
         this.$refs.filterTable.clearSort(); // 清除排序
         this.$refs.filterTable.columnConfig.order = '';  // 清除排序高亮图标
    }
    
    • 1
    • 2
    • 3
    • 4

    注:

    不管是el-table自带的排序还是远程排序,使用官方文档中的clearSort方法都无法去除排序的高亮效果。只能通过把el-table-column组件中的columnConfig的order字段设置为空才能清除高亮

  • 相关阅读:
    并发与并行,同步和异步,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang并发编程之GoroutineEP13
    SAP ERP乙方咨询公司研发自有产品,难能可贵!
    Windows取证——隐藏术
    【干货】RPA+AI入门必须知道的39个名词
    mysql指令行登录如何添加mysql.sock的配置?(亲测)
    基于energy score的out-of-distribution数据检测,LeCun都说好 | NerulPS 2020
    荧光染料BDP FL DBCO,BDP FL 二苯基环辛炔,CAS:2360493-46-3
    六、流量监管、流量整形
    Redis实战之缓存:查询、添加缓存、更新缓存、缓存预热、缓存穿透、缓存雪崩、缓存击穿 解决方案及实例代码
    【大数据】Hadoop
  • 原文地址:https://blog.csdn.net/weixin_44867717/article/details/126600261