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

这篇具有很好参考价值的文章主要介绍了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文章来源地址https://www.toymoban.com/news/detail-621821.html

// 子级携带父级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
    },

到了这里，关于vue element-table（树形结构），实现同级拖动排序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！