ElementUI - Table 表頭排序

ElementUI - Table 表頭自帶排序功能,和排序事件,可是目前只是對當前界面的數據進行排序。函數

項目需求: 點擊表頭排序的時候,對全部數據進行排序。優化

初步方案: 在點擊排序按鈕的時,在排序事件sort-change 中,進行數據請求,
                 此時會先重拍一次當前頁面的數據,再渲染接口返回數據。用戶體驗不是很好。this

優化方案: 使用render-header自定義tableHeader,此時要使用render函數來建立表頭。spa

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'
                }
              })
            ]
          )
        ])
    }
相關文章
相關標籤/搜索