// 安裝
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', // 過濾器，不需要進行拖動的元素
      preventOnFilter: false, // 在觸發(fā)過濾器`filter`的時候調(diào)用`event.preventDefault()`
      ghostClass: 'sortable-ghost'
    })
  }
}

// 將樹數(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)為列表再進行處理
  const activeRows = this.treeToTile(this.table.data)
  const oldData = activeRows[oldIndex]
  const newData = activeRows[newIndex]
},

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