icon
Let's create! WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

【Vue.js & Element Plus】ボタンでソートできる表をサクッと作ってみる

更新: 2024/07/29 2928文字

今回は、以前ちょくちょく使用していたVue.jsとElement Plusライブラリを使用して、ボタンでソートできる表をサクッと作ってみます。いろんなサイトにサンプルが上がっていますが、たぶんシンプルに実装しているほうだと思います。さっそく内容を確認してみましょう。

通常のソート無し表の例(v-forディレクティブ)

例えば、こういう感じの普通の表はv-forディレクティブでループ回し、Mustache({{ 〇〇 }}みたいなやつ)でデータをバインドして作ることができます。コードは以下のような感じ。

<tr v-for=”items in tableData”>
 <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 :data=”tableData”>
 <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メソッド使ってもいいかもしれません。

methods: {
 dateFormat(row, column) {
  return row.date.toLocaleString().slice( 0, -8 );
 },
}

上記のように書いて、空白含む後ろ8文字をカットしたりもしました。

各種参考リンク

今回の動作サンプルは当サイトtest/202407-vue-element-table.htmlに置いていますので、実際に操作してみたい

あとがき・まとめ

  • vueのv-forディレクティブでループ回して表を作るのは簡単だが、ソート機能はない
  • Element Plusにソート機能があり、『sortable』をつけることでデータ内の値でソートできる
  • 日付形式文字列だと、うまくソートが動かない挙動が確認された

まとめると、こんなところでしょうか。管理人はWordPress案件などで、以前はソートもパラメータつけてサーバーサイドで、というのがありました。こういうのを覚えると、ソートはフロントに任せたりできるので、サーバーサイドはちょっとシンプルにできそうです。


【カテゴリ】- javascript/jQuery、その他
【タグ】-

関連記事