快捷導(dǎo)航

Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽

更新時間：2023年05月08日 10:55:35 作者：i東東

本文主要介紹了Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求

表格實(shí)現(xiàn)行拖拽,要求只支持同級拖拽！

實(shí)現(xiàn)

使用插件:SortableJS,可以參考官網(wǎng)配置項！

// 安裝
npm install sortablejs --save
// 引入
import Sortable from 'sortablejs';

//my-table組件中
// 排序功能
setDragSort() {
//獲取需要添加拖拽的組件
  const el =
      this.$refs.elTable &&
      this.$refs.elTable.$el.querySelector(
        '.el-table__body-wrapper > table > tbody'
      )
// 判斷是props傳遞的參數(shù)(是否開啟拖拽,拖拽結(jié)束的方法,拖拽的組件)是否存在
  if (this.draggable && this.onDragEnd && el) {
    if (this.dragSort) this.dragSort.destroy() // 防止在Dom上重復(fù)綁定事件
    this.dragSort = sortablejs.create(el, {
      onEnd: (evt) => this.onDragEnd(evt),
      handle: this.handle ? `.${this.handle}` : '', // 可以拖拽的手柄,傳入的為類名
      filter: '.el-input, .el-textarea', // 過濾器，不需要進(jìn)行拖動的元素
      preventOnFilter: false, // 在觸發(fā)過濾器`filter`的時候調(diào)用`event.preventDefault()`
      ghostClass: 'sortable-ghost'
    })
  }
}

避坑(樹形結(jié)構(gòu)導(dǎo)致下標(biāo)錯亂)

如上代碼,就可以在頁面進(jìn)行推拽了,但是因?yàn)槭菢湫谓Y(jié)構(gòu),所以拖拽結(jié)束的時候拿到的下標(biāo)可能或錯亂,這個時候就需要將數(shù)據(jù)打平,在進(jìn)行拿值。

// 將樹數(shù)據(jù)轉(zhuǎn)化為平鋪數(shù)據(jù)
treeToTile(treeData, childKey = 'children') {
  const arr = []
  const expanded = data => {
    if (data && data.length > 0) {
      data.filter(d => d).forEach(e => {
        arr.push(e)
        expanded(e[childKey] || [])
      })
    }
  }
// 拖拽結(jié)束
async handleNodeDrag(evt) {
  const { newIndex, oldIndex } = evt
  // 把樹形的結(jié)構(gòu)轉(zhuǎn)為列表再進(jìn)行處理
  const activeRows = this.treeToTile(this.table.data)
  const oldData = activeRows[oldIndex]
  const newData = activeRows[newIndex]
},

通過平鋪之后就可以正常拿到拖拽前后的正確的下標(biāo)了,這樣就可以進(jìn)行下一步的操作了(提交更改到后端-->重新獲取數(shù)據(jù)-->渲染頁面)

避坑(樹形結(jié)構(gòu)導(dǎo)致拖拽父級子級數(shù)據(jù)不跟隨父級移動)

如上圖,拖拽之后子級數(shù)據(jù)并沒有跟隨父級,這樣就導(dǎo)致頁面顯示不正確,解決方法:首先想到的當(dāng)然既然已經(jīng)拖拽成功,那么肯定直接像后端獲取數(shù)據(jù)來進(jìn)行表格的刷新,但是試了一下表格并沒有更新,因?yàn)槲抑皇歉淖兞隧樞?其他所有內(nèi)容都沒有變,就導(dǎo)致Vue是通過虛擬DOM的比較來進(jìn)行頁面的更新,所以頁面并不會因?yàn)楂@取了數(shù)據(jù)而更新,所以這時候就需要對key值進(jìn)行操作了。

// 方法1
$forceUpdate
需要謹(jǐn)慎使用。 原因:它會強(qiáng)制整個組件的渲染，如果頻度沒有控制好，會一直渲染，導(dǎo)致應(yīng)用性能變得很低！！(不過我用的不生效,不知道為啥)
// 方法2
 this.key = Symbol(new Date().toString())
 簡單粗暴,直接給生成新的唯一值！?。√行Ч?/pre>

至此,表格刷新完成,但是新的BUG隨之而來....

避坑(刷新表格導(dǎo)致抖動)

如上圖,這樣的問題,暫時沒想到什么好的辦法,我直接加上了Loading掩蓋,解決之后如下,如此效果會稍微好一點(diǎn),如果有更好的方法還望大家不吝賜教！

平級數(shù)據(jù)拖拽

平級數(shù)據(jù)拖拽不存在上面遇到的任何問題,正常寫就好,展示一下:

小結(jié)

到此這篇關(guān)于Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽的文章就介紹到這了,更多相關(guān)Vue.js樹形數(shù)據(jù)拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: