快捷導(dǎo)航

antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能

更新時(shí)間：2021年01月08日 15:01:16 作者：心中有曲自然嗨丶

這篇文章主要介紹了antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

實(shí)現(xiàn)效果

本來想在網(wǎng)上看看有沒有基于antdesign做的，然后發(fā)現(xiàn)是真的少??！廢話不多說，先上圖：

在這里插入圖片描述

sortablejs介紹

首先先來認(rèn)識(shí)一下這個(gè)插件: sortablejs
大家可以去細(xì)讀一下它的api文檔：

在這里插入圖片描述

這邊我就著重介紹一下我用到的api。
1.group可以傳入對(duì)象，參數(shù)值為name,pull,put,
name:如果是要兩個(gè)列表下進(jìn)行拖動(dòng)的話，name的值必須為一樣；
pull:pull用來定義從這個(gè)列表容器移動(dòng)出去的設(shè)置，true/false/‘clone'/function

true :列表容器內(nèi)的列表單元可以被移出；
false：列表容器內(nèi)的列表單元不可以被移出；
clone：列表單元移出，移動(dòng)的為該元素的副本；
function：用來進(jìn)行pull的函數(shù)判斷，可以進(jìn)行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否移出；

put:put用來定義往這個(gè)列表容器放置列表單元的的設(shè)置，true/false/[‘foo',‘bar']/function；

true:列表容器可以從其他列表容器內(nèi)放入列表單元；
false：與true相反；
[‘foo',‘bar']：這個(gè)可以是一個(gè)字符串或者是字符串的數(shù)組，代表的是group配置項(xiàng)里定義的name值；
function：用來進(jìn)行put的函數(shù)判斷，可以進(jìn)行復(fù)雜邏輯，在函數(shù)中return false/true來判斷是否放入；

2.animation ms, number 單位：ms，定義排序動(dòng)畫的時(shí)間；
3. handle: 格式為簡(jiǎn)單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動(dòng)的手柄，只有按住拖動(dòng)手柄才能使列表單元進(jìn)行拖動(dòng)（你想讓哪個(gè)元素拖動(dòng)就綁定這個(gè)元素的class）；
4. onStart:function(evt){}開始拖拽的回調(diào)方法；
5. onUpdate:function(evt){}列表內(nèi)元素順序更新的回調(diào)方法；
6. onAdd:function(evt){}元素從一個(gè)列表拖拽到另一個(gè)列表的回調(diào)方法；
7. onRemove:function(evt){} 元素從列表中移除進(jìn)入另一個(gè)列表的回調(diào)方法；
這個(gè)需求用到這些api也就足夠了。

具體實(shí)現(xiàn)

1.第一步先初始化sortable方法，因?yàn)槲覀兊男枨笫莾蓚€(gè)表格拖拽，所以初始化2個(gè)方法。
html代碼

<s-table
 ref="table"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>
  
<s-table
 class="sort-table"
 ref="table2"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>

具體的columns 和loadData就不多余闡述。

JS代碼

import Sortable from 'sortablejs'
methods:{
 // 初始化 sortable 實(shí)現(xiàn)拖動(dòng)
 initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 開始拖拽的時(shí)候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 initSortable1 () {
 var that = this
 var el = this.$el.querySelector('.left-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 開始拖拽的時(shí)候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 }

關(guān)于handle所取的class，因?yàn)槲覀兪且獙?duì)antdesign表格的每一行進(jìn)行拖拽，所以要選取到他每一行的class。

在這里插入圖片描述

至此兩個(gè)table之間就可以實(shí)現(xiàn)拖拽效果，但僅僅只是拖拽效果。
因?yàn)檫@樣拖拽之后，兩邊的數(shù)據(jù)源并沒有發(fā)生變化，而且明明已經(jīng)拖拽過來之后，另一邊的表格的展示頁會(huì)存在錯(cuò)誤：

在這里插入圖片描述

排序是我右邊表格特有的，但是這邊的表格是不需要這個(gè)排序的，而且如果拖拽成功的話為什么還會(huì)顯示暫無數(shù)據(jù)呢，最后左邊表頭的CheckBox也無法選中。所以到此為止只是有拖拽效果而已。
2.在拖拽動(dòng)作之后，把左右兩邊的數(shù)據(jù)源重新賦值，這里有兩種實(shí)現(xiàn)思路：

每一次拖拽之后都去請(qǐng)求后臺(tái)數(shù)據(jù)，拿到新的數(shù)據(jù)源之后重新賦值給表格，
前端自己做好數(shù)據(jù)源的處理，等所有的拖拽結(jié)束之后排好序再給后臺(tái)保存。

考慮到性能消耗，我就選擇了第二種：
1）定義左右兩邊的數(shù)據(jù)源數(shù)組

data(){
 return{
 unMatchedList: [], // 左邊未匹配的數(shù)據(jù)
 dataList: [], // 右邊已匹配的數(shù)據(jù)
 pullIndex ：''，//原數(shù)組拖拽元素的下標(biāo)
 }
}

2)在每一次remove或者add的時(shí)候更新數(shù)據(jù)源，這里只寫了一個(gè)表格拖拽的方法，另一個(gè)只要把that.dataList和that.unMatchedList左右兩邊的數(shù)據(jù)源賦值調(diào)換一下就行，就不貼重復(fù)代碼了

 // 開始拖拽的時(shí)候
 onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: function (evt) {
 //evt.newIndex 移入到新數(shù)組的下標(biāo)
 //pullIndex 原數(shù)組拖拽元素的下標(biāo)
  that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  //通知table視圖更新
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		 that.$refs.table && this.$refs.table.refresh(true)
  })
 },
 onRemove: function (evt) {
  that.dataList.splice(evt.oldIndex, 1)
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		that.$refs.table && this.$refs.table.refresh(true)
  })
 }
 })

3）實(shí)現(xiàn)同一個(gè)表格上下拖拽排序

initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 //這里千萬不要用onEnd 方法
 onUpdate: function (evt) {
  var o = evt.oldIndex
  var n = evt.newIndex
  if (o === n) {
  return
  }
  that.sortListAndUpdate(that.dataList, o, n)
 },
 })
 },
 // 對(duì)數(shù)據(jù)進(jìn)行排序，要求 o（oldIndex） 和 n（newIndex） 從 0開始
 sortList (list, o, n) {
 var newTableData = JSON.parse(JSON.stringify(list))
 var data = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, data[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 return newTableData
 },
 /**
 * 對(duì)數(shù)據(jù)排序并更新 table， 要求 o（oldIndex） 和 n（newIndex） 從 0開始
 */
 sortListAndUpdate (list, o, n) {
 var newTableData = this.sortList(list, o, n)
 newTableData.forEach((item, index) => {
 item.sort = index + 1
 })
 this.$nextTick(() => {
 this.dataList = newTableData
 that.$refs.table2 && this.$refs.table2.refresh(true)
 })
 },

這邊我們選用onUpdate方法來排序，不要用onEnd方法，因?yàn)橹灰阌型献Ч?，都?huì)去觸發(fā)onEnd方法，導(dǎo)致左右拖拽完后又會(huì)觸發(fā)一次排序。

到此這篇關(guān)于antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能的文章就介紹到這了,更多相關(guān)antdesign-vue實(shí)現(xiàn)拖拽排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: