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

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

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

需求

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

實現(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ù)(是否開啟拖拽,拖拽結束的方法,拖拽的組件)是否存在
  if (this.draggable && this.onDragEnd && el) {
    if (this.dragSort) this.dragSort.destroy() // 防止在Dom上重復綁定事件
    this.dragSort = sortablejs.create(el, {
      onEnd: (evt) => this.onDragEnd(evt),
      handle: this.handle ? `.${this.handle}` : '', // 可以拖拽的手柄,傳入的為類名
      filter: '.el-input, .el-textarea', // 過濾器，不需要進行拖動的元素
      preventOnFilter: false, // 在觸發(fā)過濾器`filter`的時候調(diào)用`event.preventDefault()`
      ghostClass: 'sortable-ghost'
    })
  }
}

避坑(樹形結構導致下標錯亂)

如上代碼,就可以在頁面進行推拽了,但是因為是樹形結構,所以拖拽結束的時候拿到的下標可能或錯亂,這個時候就需要將數(shù)據(jù)打平,在進行拿值。

// 將樹數(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] || [])
      })
    }
  }
// 拖拽結束
async handleNodeDrag(evt) {
  const { newIndex, oldIndex } = evt
  // 把樹形的結構轉(zhuǎn)為列表再進行處理
  const activeRows = this.treeToTile(this.table.data)
  const oldData = activeRows[oldIndex]
  const newData = activeRows[newIndex]
},

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

避坑(樹形結構導致拖拽父級子級數(shù)據(jù)不跟隨父級移動)

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

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

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