DEV

Element UIのtableでsortとpaginationを連動させる

#Vue.js#ElementUI

Element UIのテーブルはソートとページネーションの相性が悪いらしい。試してみたら確かに悪かった。何が悪いかというと、ソートがページネーションと連動しない。ページ内に表示されているデータがソートされるだけだった。

対策

  • el-table-columnのsortableは使わない。
  • el-table-columnのrender-headerを使って、テーブルのヘッダにソートのcaretとonclickイベントを追加する。
  • ソートのcaretがクリックされたら、el-tableのdataに設定している、データ全体をソートする。

render-header

  • ここに書いてあった。
renderHeader (h, e) {
  return h('div', null, [
    h('span', {class: 'caret-wrapper'}, [
      h('i', {
        class: this.sortCaretAsc(e.column.property),
        on: {
          click: () => this.sortChange(e.column.property, 'asc')
        }
      }, null),
      h('i', {
        class: this.sortCaretDesc(e.column.property),
        on: {
          click: () => this.sortChange(e.column.property, 'desc')
        }
      }, null)
    ]),
    e.column.label
  ])
}

computedでcaretのクラスを設定

sortCaretAsc: function () {
  return function (prop) {
    if (this.sortProp === prop && this.sortOrder === 'asc') {
      return 'sort-caret ascending active'
    }
    return 'sort-caret ascending'
  }
},
sortCaretDesc: function () {
  return function (prop) {
    if (this.sortProp === prop && this.sortOrder === 'desc') {
      return 'sort-caret descending active'
    }
    return 'sort-caret descending'
  }
}

caretがactiveな場合のスタイルを設定

.el-table .sort-caret.ascending.active {
  border-bottom-color: #409eff;
}
.el-table .sort-caret.descending.active {
  border-top-color: #409eff;
}

caretがクリックされたら、ソート条件をdataに格納しつつ、ソート実行

sortChange (prop, order) {
  this.sortProp = prop
  this.sortOrder = order
  this.sortClients({prop: prop, order: order})
},