Vue.js结合SortableJS实现树形数据拖拽

// 安装
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传递的参数(是否开启拖拽,拖拽结束的方法,拖拽的组件)是否存在
  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, // 在触发过滤器`filter`的时候调用`event.preventDefault()`
      ghostClass: 'sortable-ghost'
    })
  }
}

// 将树数据转化为平铺数据
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
  // 把树形的结构转为列表再进行处理
  const activeRows = this.treeToTile(this.table.data)
  const oldData = activeRows[oldIndex]
  const newData = activeRows[newIndex]
},

// 方法1
$forceUpdate
需要谨慎使用。 原因:它会强制整个组件的渲染，如果频度没有控制好，会一直渲染，导致应用性能变得很低！！(不过我用的不生效,不知道为啥)
// 方法2
 this.key = Symbol(new Date().toString())
 简单粗暴,直接给生成新的唯一值！！！太有效果了