溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue.draggable實現表格拖拽排序效果展示的具體代碼，供大家參考，具體內容如下
主要使用vuedraggable和sortablejs兩個組件。
1、安裝組件
npm install vuedraggable npm install sortablejs
2、引入組件
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';
export default {
components: {
draggable,
Sortable
},
....
3、HTML
我的例子是給表格排序，項目整體使用的是ivew，所以用了ivew的柵格來畫表格
<Row class="draggableTable-head">
<Col span="1">序號</Col>
<Col span="2">商品條碼</Col>
<Col span="3">商品名稱</Col>
<Col span="1">單位</Col>
</Row>
<draggable class="list-group" v-model="tableData" :options="{draggable:'.rows'}"
:move="getdata" @update="datadragEnd">
<Row class="rows" v-for="(item,index) in tableData" :key="index">
<Col span="1">
<div class="cell">{{index+1}}</div>
</Col>
<Col span="2">
<div class="cell">{{item.barCode}}</div>
</Col>
<Col span="2">
<div class="cell">{{item.name}}</div>
</Col>
<Col span="2">
<div class="cell">{{item.unit}}</div>
</Col>
</Row>
</draggable>
options中draggable的值是拖動的class。一開始怎么都不能拖動，加上這個就可以了。
4、兩個方法
move：拖動中
update：拖拽結束
getdata (data) {
// console.log('getdata方法');
},
datadragEnd (evt) {
// console.log('datadragEnd方法');
console.log('拖動前的索引 :' + evt.oldIndex)
console.log('拖動后的索引 :' + evt.newIndex)
}
表格的處理邏輯是：
1、當前行的id和排序號作為參數，調用后臺更改順序的方法
2、不論調用成功與否，都重新渲染表格數據
【注意】如果有分頁，那么傳給后臺的排序號就要再加上之前的條數，即（頁碼-1）*每頁條數
Vue.Draggable作者的git地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
