Vue-draggableコンポーネントを利用して、Vueプロジェクトにおける表の内容のドラッグ・ソートを実現します。
4855 ワード
Vue-draggableのgithub転送ドア：
https://github.com/SortableJS/Vue.Draggable
一.ダウンロード依存パケット：
（描画方法：
ドラッグやドラッグの終了時のidを取得します。
https://github.com/SortableJS/Vue.Draggable
一.ダウンロード依存パケット：
npm install vuedraggable -S 二.必要な現在のインターフェースに依存を導入し、コンポーネントを登録する：
import draggable from "vuedraggable";
export default {
components: {
draggable,
}
（描画方法：
<table class="dataTabble">
<thead>
<tr>
<th width="110"> </th>
<th width="200"> </th>
<th width="160"> </th>
<th width="160"> </th>
</tr>
</thead>
<draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
<tr v-for="(item,id) in tablelist" :key="id">
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>{{item.num}}</td>
<td>
<div class="tabopa">
<a @click="dialogFormVisible = true" style="cursor:pointer"> </a>
<a @click="open2"> </a>
</div>
</td>
</tr>
</draggable>
</table>
<div class="zhu mt40"> ： </div>
ここでdataの部分は、{を通して} } } dataの中のデータを取得し、実際には要求で取得します。
data() {
return {
tablelist: [
{ id: 1, name: " 1", time: "2018-08-25 14：54", num: "1000" },
{ id: 2, name: " 2", time: "2018-08-25 14：54", num: "200" },
{ id: 3, name: " 3", time: "2018-08-25 14：54", num: "30000" },
{ id: 4, name: " 4", time: "2018-08-25 14：54", num: "40" }
],
};
},
ドラッグやドラッグの終了時のidを取得します。
methods: {
//
getdata(evt) {
console.log(evt.draggedContext.element.id);
},
datadragEnd(evt) {
console.log(" :" + evt.oldIndex);
console.log(" :" + evt.newIndex);
console.log(this.tags);
},
<template>
<div>
<!--main-->
<table class="dataTabble">
<thead>
<tr>
<th width="110"> </th>
<th width="200"> </th>
<th width="160"> </th>
<th width="160"> </th>
</tr>
</thead>
<draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
<tr v-for="(item,id) in tablelist" :key="id">
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>{{item.num}}</td>
<td>
<div class="tabopa">
<a @click="dialogFormVisible = true" style="cursor:pointer"> </a>
<a @click="open2"> </a>
</div>
</td>
</tr>
</draggable>
</table>
<div class="zhu mt40"> ： </div>
<!--main end-->
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
tablelist: [
{ id: 1, name: " 1", time: "2018-08-25 14：54", num: "1000" },
{ id: 2, name: " 2", time: "2018-08-25 14：54", num: "200" },
{ id: 3, name: " 3", time: "2018-08-25 14：54", num: "30000" },
{ id: 4, name: " 4", time: "2018-08-25 14：54", num: "40" }
],
};
},
methods: {
//
getdata(evt) {
console.log(evt.draggedContext.element.id);
},
datadragEnd(evt) {
console.log(" :" + evt.oldIndex);
console.log(" :" + evt.newIndex);
console.log(this.tags);
},
}
}
</script>
<style>
</style>