ElementUI - Table 表头排序

最新推荐文章于 2024-09-13 11:27:00 发布

原创最新推荐文章于 2024-09-13 11:27:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了ElementUI-Table组件的排序功能局限性及优化方案。原生排序仅作用于当前页面，通过自定义表头实现全局排序，提升用户体验。介绍了使用render-header自定义表头的具体实现方法。

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'
                }
              })
            ]
          )
        ])
    }