ElementUI - Table 表头排序 - Html/Css

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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