目次
はじめに
いつもの如くクライアントからデータ用テーブルの列を並び替えしたいとの要望がありました。
遥か昔の記憶で、Vue.Draggableを使ってサンプルを作った記憶があったので、引っ張り出してみました。
せっかくなので、記事にしようと思います。
環境
この記事は、以下の管理人の検証環境にて記事にしています。
| vue.js | 2.5.8 |
| Vue.Draggable | 2.24.3 |
導入
今回のサンプルはVue.Draggableが必要なので、基本的な使い方は下記を参考にしてください。
-
-
Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ
Vue.Draggableは、Vue.js製のドラッグ＆ドロップコンポートネントライブラリです。
現存するVue.js製のドラッグ＆ドロップライブラリとしては、最大の人気を誇ります。
コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。
単純にドラッグ＆ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。
主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。
さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。
基本的な使い方、ちょっとした応用などコピペで1分のサンプルを公開しています。
step.1 ライブラリの呼び出し
今回はCDNを使用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
step.2 Script
列用の配列データcolumnsを用意します。
列に合わせて行のデータusersをオブジェクト形式で用意します。
new Vue({
el: '#app',
data: {
columns: [
'id',
'name',
'e-mail',
'message'
],
users: [
{id:"1", name:"name1", "e-mail":"info@hoge.com", message:"hellow world"},
{id:"2", name:"name2", "e-mail":"info@hoge.com", message:"hellow cooking"},
{id:"3", name:"name3", "e-mail":"info@hoge.com", message:"hellow speak"},
{id:"4", name:"name4", "e-mail":"info@hoge.com", message:"hellow call"},
{id:"5", name:"name5", "e-mail":"info@hoge.com", message:"hellow jump"},
{id:"6", name:"name6", "e-mail":"info@hoge.com", message:"hellow stand"},
{id:"7", name:"name7", "e-mail":"info@hoge.com", message:"hellow down"}
]
},
});
step.3 HTML
コンパイルを経由しない場合は、下記のソースのようにisを使ってdraggableコンポーネントを指定する必要があります。
columnsをkeyにして、userの列を表示します。
<div id="app">
<table class="table">
<thead>
<tr tag="tr" is="draggable" v-model="columns">
<th v-for="column in columns">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td v-for="(column, i) in columns" :key="user[column]+i">{{user[column]}}</td>
</tr>
</tbody>
</table>
</div>
注意
ES6等で記述するならば、
<tr tag="tr" is="draggable" v-model="columns">
<th v-for="column in columns">{{column}}</th>
</tr>
を
<draggable v-model="columns" tag="tr">
<th v-for="(column, i) in columns" :key="column">{{column}}</th>
</draggable>
にします。
サンプル
さいごに
Vue.jsでテーブルの列を並び替えするという記事でした。
他にもドラッグした後に、列の順番をブラウザに保存する方法などのアイデアもあるので、気が向いた時に記事にしたいと思います。
今日はこの辺で－