快捷導(dǎo)航

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地址

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源
這篇文章主要介紹了cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能
這篇文章主要介紹了vue實(shí)現(xiàn)后臺(tái)管理權(quán)限系統(tǒng)及頂欄三級(jí)菜單顯示功能，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
vue實(shí)現(xiàn)表單單獨(dú)移除一個(gè)字段驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單單獨(dú)移除一個(gè)字段驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue使用laydate時(shí)間插件的方法
這篇文章主要為大家詳細(xì)介紹了vue使用laydate時(shí)間插件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問題
這篇文章主要介紹了淺談vue 二級(jí)路由嵌套和二級(jí)路由高亮問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3?封裝?Element?Plus?Menu?無限級(jí)菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對(duì)?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動(dòng)態(tài)渲染菜單，對(duì)Vue3?無限級(jí)菜單組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-09-09
Vue.js實(shí)現(xiàn)日歷功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
VUE的tab頁面切換的四種方法
這篇文章主要介紹了VUE的tab頁面切換的四種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案
這篇文章主要介紹了Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue引用BootStrap以及引用bootStrap-vue.js問題
這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10