vue.draggable實現表格拖拽排序效果

來源：懂視網責編：小OO 時間：2020-11-27 22:03:20

vue.draggable實現表格拖拽排序效果

本文實例為大家分享了vue.draggable實現表格拖拽排序效果展示的具體代碼，供大家參考，具體內容如下：主要使用vuedraggable和sortablejs兩個組件。1、安裝組件；npm install vuedraggablenpm install sortablejs。2、引入組件；import draggable from 'vuedraggable'；import Sortable from 'sortablejs'；export default { components： { draggable.Sortable }....。3、HTML；我的例子是給表格排序，項目整體使用的是ivew，所以用了ivew的柵格來畫表格。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了vue.draggable實現表格拖拽排序效果展示的具體代碼，供大家參考，具體內容如下：主要使用vuedraggable和sortablejs兩個組件。1、安裝組件；npm install vuedraggablenpm install sortablejs。2、引入組件；import draggable from 'vuedraggable'；import Sortable from 'sortablejs'；export default { components： { draggable.Sortable }....。3、HTML；我的例子是給表格排序，項目整體使用的是ivew，所以用了ivew的柵格來畫表格。

本文實例為大家分享了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地址

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com