1. 程式人生 > >ElementUI - Table 表頭排序

ElementUI - Table 表頭排序

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