本文實(shí)例為大家分享了vue.draggable實(shí)現(xiàn)表格拖拽排序效果展示的具體代碼，供大家參考，具體內(nèi)容如下
主要使用vuedraggable和sortablejs兩個(gè)組件。
1、安裝組件
npm install vuedraggablenpm install sortablejs
2、引入組件
import draggable from 'vuedraggable';import Sortable from 'sortablejs';export default { components: { draggable, Sortable }, ....3、HTML
我的例子是給表格排序，項(xiàng)目整體使用的是ivew，所以用了ivew的柵格來畫表格
<Row class="draggableTable-head"> <Col span="1">序號(hào)</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的值是拖動(dòng)的class。一開始怎么都不能拖動(dòng)，加上這個(gè)就可以了。
4、兩個(gè)方法
move：拖動(dòng)中
update：拖拽結(jié)束
getdata (data) { // console.log('getdata方法');},datadragEnd (evt) { // console.log('datadragEnd方法'); console.log('拖動(dòng)前的索引 :' + evt.oldIndex) console.log('拖動(dòng)后的索引 :' + evt.newIndex)} 表格的處理邏輯是：
1、當(dāng)前行的id和排序號(hào)作為參數(shù)，調(diào)用后臺(tái)更改順序的方法
2、不論調(diào)用成功與否，都重新渲染表格數(shù)據(jù)
【注意】如果有分頁，那么傳給后臺(tái)的排序號(hào)就要再加上之前的條數(shù)，即（頁碼-1）*每頁條數(shù)
Vue.Draggable作者的git地址
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
