vue element-table（树形结构），实现同级拖动排序

####需求：树形结构的table需要实现同级拖拽排序
1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html

import Sortable from 'sortablejs'

2.定义变量

data () {
    return {
      table:[], // 表格数据
      activeRows: [] // 转换为列表的数据扁平化
    }
  },

3.初始化created中调用方法，方法如下

rowDrop () {
      const tbody = document.querySelector('.table .el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        animation: 200, // 定义排序动画的时间
        forceFallback: true, // boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
        onMove: ({ dragged, related }) => {
          const oldRow = this.activeRows[dragged.rowIndex] // 移动的那个元素
          const newRow = this.activeRows[related.rowIndex] // 新的元素
          if (oldRow.parentId !== newRow.parentId) { // 移动的元素与新元素父级id不相同
            return false // 不允许跨级拖动
          }
        },
        onStart: () => { // 开始拖拽前把树形结构数据扁平化
          this.activeRows = this.treeToTile(this.table) // 把树形的结构转为列表再进行拖拽
        },
        onEnd: e => {
          const oldRow = this.activeRows[e.oldIndex] // 移动的那个元素
          const newRow = this.activeRows[e.newIndex] // 新的元素
          if (e.oldIndex === e.newIndex || oldRow.parentId !== newRow.parentId) return
          const index = this.activeRows.indexOf(oldRow)
          if (index < 0) return
          const changeIndex = e.newIndex - e.oldIndex
          this.activeRows.splice(index, 1)
          this.activeRows.splice(index + changeIndex, 0, oldRow)

          const parentId = newRow.parentId
          const currentRows = this.activeRows
            .filter(c => c.parentId === parentId)
            ?.map((item, index) => {
              return {
                codeName: item.codeName, // 名称
                id: item.id, // 当前行的唯一标识
                seqNo: index + 1
              }
            })
          // 请求接口排序，根据后端要求填写参数
          this.handleGetApi(currentRows) // 请求后端排序接口
        }
      })
    }

4.扁平化数据方法

   /**
     * 将树数据转化为平铺数据
     * @param <Array> treeData当前要转的id
     * @param <String> childKey 子级字段
     * @return <Array> 返回数据
     */
    treeToTile (treeData, childKey = 'child') {
      const arr = []
      const expanded = data => {
        if (data && data.length > 0) {
          data.filter(d => d).forEach(e => {
            arr.push(e)
            expanded(e[childKey] || [])
          })
        }
      }
      expanded(treeData)
      return arr
    },

5.犹豫这个过程中需要子级存在父级的parentId，自己把扁平化的方法改造了一下，在查询完列表数据时同步给子级添加父级的id

// 子级携带父级id
    treeParent (treeData, childKey = 'child') {
      const expandParent = (data, parentId) => {
        if (data && data.length > 0) {
          data.filter(d => d).forEach(e => {
            if (parentId) e.parentId = parentId
            expandParent(e[childKey] || [], e.id || '')
          })
        }
      }
      expandParent(treeData)
      return treeData
    },