ElementUI - Table 表头排序

Posted on   !sylar  阅读(2250)  评论(0编辑  收藏  举报

ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序。

项目需求: 点击表头排序的时候,对所有数据进行排序。

初步方案: 在点击排序按钮的时,在排序事件sort-change 中,进行数据请求,
                 此时会先重拍一次当前页面的数据,再渲染接口返回数据。用户体验不是很好。

优化方案: 使用render-header自定义tableHeader,此时要使用render函数来创建表头。

复制代码
getheaderTime(h) {
      const This = this
      return h('div', {
      },
        ['告警时间',
          h('span', {
            class: 'iline-table-sort'
          },
            [
              h('i', {
                'class': {
                  'el-icon-caret-bottom': This.orderByType === 'desc',
                  'el-icon-caret-top': This.orderByType === 'asc',
                  'active': This.orderBy === 'daqTime'
                },
                attrs: {
                  'orderByType': 'desc',
                  'orderType': 'daqTime'
                },
                on: {
                  click: This.clickHandler
                },
                style: {
                  fontSize: '22px'
                }
              })
            ]
          )
        ])
    }
复制代码
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示