ElementPlusのTableを使ってみた

　複数キーでソートできなかった。

成果物

• DEMO
• github

コード

<div id="app">
<el-table ref="singleTable" :data="tableData" style="width: 100%" highlight-current-row @current-change="onCurrentChange" :default-sort="{prop:'date', order:'descending'}">
  <el-table-column prop="date" label="Date" width="180" sortable :formatter="onFormatterDate" 
    :filters="[{text: '2016-05-01', value: new Date('2016-05-01')}, {text: '2016-05-02', value: new Date('2016-05-02')}, {text: '2016-05-03', value: new Date('2016-05-03')}, {text: '2016-05-04', value: new Date('2016-05-04')}]"
    :filter-method="onFilterDate"></el-table-column>
  <el-table-column prop="age" label="Age" width="180" sortable ></el-table-column>
  <el-table-column prop="name" label="Name" width="180" sortable ></el-table-column>
  <el-table-column prop="address" label="Address" sortable ></el-table-column>
</el-table>

window.addEventListener('load', (event) => {
    const App = {
      setup() {
        return {
          tableData: [{
            date: new Date('2016-05-03'),
            name: 'Tom',
            age: 99,
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: new Date('2016-05-02'),
            name: 'Tom',
            age: 100,
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: new Date('2016-05-04'),
            name: 'Tom',
            age: 20,
            address: 'No. 189, Grove St, Los Angeles'
          }, {
            date: new Date('2016-05-01'),
            name: 'Tom',
            age: 33,
            address: 'No. 189, Grove St, Los Angeles'
          }]
        }
      },
        methods: {
          setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
          },
          onCurrentChange(val) {
            this.currentRow = val;
            console.log(this.currentRow);
          },
          onFormatterDate(row, column) {
              return row.date.toLocaleString();
          },

          onFilterDate(value, row, column) {
            const property = column['property'];
            console.log(value, row[property], row, column);
            return row[property].getTime() === value.getTime();
          }
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
});

特徴

• 依存ライブラリ：vue3
• データ形式：オブジェクト配列

残念

• 複数キーでソートできない
• フィルタリングUIがうまく表示されなかった。チェックが反映されない
  • 公式サイトの例は正常に反映されるが、クリックするたび表示まで8秒かかった

対象環境

• 2021-02-20
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux