【Vue.js & Element Plus】ボタンでソートできる表をサクッと作ってみる
| 更新: 2024/07/29 | 2928文字
今回は、以前ちょくちょく使用していたVue.jsとElement Plusライブラリを使用して、ボタンでソートできる表をサクッと作ってみます。いろんなサイトにサンプルが上がっていますが、たぶんシンプルに実装しているほうだと思います。さっそく内容を確認してみましょう。
目次
通常のソート無し表の例(v-forディレクティブ)
例えば、こういう感じの普通の表はv-forディレクティブでループ回し、Mustache({{ 〇〇 }}みたいなやつ)でデータをバインドして作ることができます。コードは以下のような感じ。
<td>{{ items.id }}</td>
<td>{{ items.date }}</td>
<td>{{ items.name }}</td>
<td>{{ items.age }}</td>
</tr>
ただし、この状態ではjavascriptのライブラリによくあるような『表の値によってソート』というのは実装されていません。サクッとやってみるため、以前も使ったElement Plusを利用してみましょうか。
Vue.js & Element Plusで、ソートできる表を作ってみた
コード例
Element PlusのCSSを使いたい場合、まずはロードしておきます。headタグ内でロードしました。
テーブル出力部分は、以下のようなコードになっています。el-table-〇〇のように書くと、Element Plus表が適応されます。propはvue内のデータのプロパティ名で、labelが表示名。
<el-table-column prop=”id” label=”id” width=”200″ sortable>
</el-table-column>
<el-table-column prop=”name” label=”name” width=”200″ sortable>
</el-table-column>
<el-table-column prop=”date” label=”registared Date” width=”200″
:formatter=”dateFormat” sortable>
</el-table-column>
<el-table-column prop=”age” label=”age” width=”200″ sortable>
</el-table-column>
</el-table>
またformatter=”dateFormat”では日付フォーマットメソッドを呼んでいます。ソートのポイントになる部分は『sortable』で、これをつけた項目にソート機能が付きます。
その後はVue.js & Element Plusをロードし、表示させたいデータやメソッド(今回は日付フォーマットだけ)、マウントしたい要素id(#app-01)などを書いていきます。
特にデータの『new Date』の部分は重要かもしれません。というのも、単純に文字列形式で渡した場合、ソートがうまく動かなかったからです。
他にも、vue拡張子ファイルにまとめたりする書き方もありますが、今回はシンプルに1ファイルにしてみました。
表示および、ソートしてみた例
まずデフォルト状態です。並び方は最初のデータの順番。このほか Element Plusのサイト内サンプルでは『:default-sort=”{prop:’date’, order:’descending’}”』のように、デフォルト並びを指定することもできるようです。
わかりやすくage(年齢)の数値でソートしてみます。値の小さい順。矢印の向きでソート種類がわかるようになっています。色がついてないときはソート無し。
そして値の大きい順。このageの値は引用符でかこって文字列にしていますが、ソートが動いています。『2021-05-03のような日付形式文字列』がちょっとまずい感じでしたね。
日付だけで時刻はカットしたいときはsliceメソッドか?
上記の例だと、日付形式でフォーマットしていることもあり『2021/5/3 9:00:00』のように、時刻も表示しています。日付だけで時刻はカットしたい場合はjavascriptのsliceメソッド使ってもいいかもしれません。
dateFormat(row, column) {
return row.date.toLocaleString().slice( 0, -8 );
},
}
上記のように書いて、空白含む後ろ8文字をカットしたりもしました。
各種参考リンク
今回の動作サンプルは当サイトtest/202407-vue-element-table.htmlに置いていますので、実際に操作してみたい
Vue.js & Element Plusソートできる表
https://division-web.atelier-ss-agency.com/test/202407-vue-element-table.html
以前書いたVue.js記事一覧(当サイト過去記事)
https://division-web.atelier-ss-agency.com/tag/vue-js/
Element Plusテーブルのページ
https://element-plus.org/en-US/component/table.html
あとがき・まとめ
- vueのv-forディレクティブでループ回して表を作るのは簡単だが、ソート機能はない
- Element Plusにソート機能があり、『sortable』をつけることでデータ内の値でソートできる
- 日付形式文字列だと、うまくソートが動かない挙動が確認された
まとめると、こんなところでしょうか。管理人はWordPress案件などで、以前はソートもパラメータつけてサーバーサイドで、というのがありました。こういうのを覚えると、ソートはフロントに任せたりできるので、サーバーサイドはちょっとシンプルにできそうです。
【カテゴリ】- javascript/jQuery、その他
【タグ】- vue.js