vue.draggable實(shí)現(xiàn)表格拖拽排序效果
更新時(shí)間：2018年12月01日 10:54:08 作者：ZoeLinJF
這篇文章主要為大家詳細(xì)介紹了vue.draggable實(shí)現(xiàn)表格拖拽排序效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue.draggable實(shí)現(xiàn)表格拖拽排序效果展示的具體代碼，供大家參考，具體內(nèi)容如下
主要使用vuedraggable和sortablejs兩個(gè)組件。
1、安裝組件
npm install vuedraggable npm 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地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue.js中window.onresize的超詳細(xì)使用方法
這篇文章主要給大家介紹了關(guān)于vue.js中window.onresize的超詳細(xì)使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個(gè),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
我們有時(shí)需要限制文本框輸入內(nèi)容的類型,本節(jié)分享下正則表達(dá)式限制文本框只能輸入數(shù)字、小數(shù)點(diǎn)、英文字母、漢字等代碼,感興趣的朋友跟隨小編一起看看吧2023-12-12
實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動(dòng)漸隱漸顯效果
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動(dòng)漸隱漸顯效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03