vue.draggable實現(xiàn)表格拖拽排序效果
更新時間：2018年12月01日 10:54:08 作者：ZoeLinJF
這篇文章主要為大家詳細介紹了vue.draggable實現(xiàn)表格拖拽排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.draggable實現(xiàn)表格拖拽排序效果展示的具體代碼，供大家參考，具體內(nèi)容如下
主要使用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：拖拽結(jié)束
getdata (data) {
// console.log('getdata方法');
},
datadragEnd (evt) {
// console.log('datadragEnd方法');
console.log('拖動前的索引 :' + evt.oldIndex)
console.log('拖動后的索引 :' + evt.newIndex)
}
表格的處理邏輯是：
1、當前行的id和排序號作為參數(shù)，調(diào)用后臺更改順序的方法
2、不論調(diào)用成功與否，都重新渲染表格數(shù)據(jù)
【注意】如果有分頁，那么傳給后臺的排序號就要再加上之前的條數(shù)，即（頁碼-1）*每頁條數(shù)
Vue.Draggable作者的git地址
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了vue組件學習教程，根據(jù)Vue官方文檔學習的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vue.js中window.onresize的超詳細使用方法
這篇文章主要給大家介紹了關(guān)于vue.js中window.onresize的超詳細使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
我們有時需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達式限制文本框只能輸入數(shù)字、小數(shù)點、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
實例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue實現(xiàn)導航標題欄隨頁面滾動漸隱漸顯效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03