目前我觉得表格拖拽排序比较好用的插件，需要用到一个插件

npm install xe-utils@3 vxe-table@3

插件网址：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

在main.js中引入

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

Vue显示表格部分

<template>
    <div>    
<!--列表-->
    <vxe-grid border row-key ref="xTable2" class="sortable-tree-demo" :scroll-y="{ enabled: false }" :columns="tableColumn" :data="tableTreeData" :tree-config="{ children: 'children' }">
      <template v-slot:addButton='{row}'>
        <el-button @click.native.prevent="handleCreate(row)" type="primary" size="mini">
          新增
        </el-button>
        <el-button @click.native.prevent="handleUpdate(row.id)" type="primary" size="mini">
          修改
        </el-button>
        <el-button @click.native.prevent="deleteData(row.id)" type="danger" size="mini">
          移除
        </el-button>
      </template>
    </vxe-grid>
    </div>
</template>

---

Vue JavaScrip部分

表头

 tableColumn: [
        {
          width: 60,
          slots: {
            default: () => {
              return [
                <span class="drag-btn">
                  <i class="vxe-icon--menu"></i>
                </span>,
              ]
            },
            header: () => {
              return [
                <vxe-tooltip
                  v-model={this.showHelpTip2}
                  content="按住后可以上下拖动排序！"
                  enterable
                >
                  <i
                    class="vxe-icon--question"
                    onClick={() => {
                      this.showHelpTip2 = !this.showHelpTip2
                    }}
                  ></i>
                </vxe-tooltip>,
              ]
            },
          },
        },
        {
          field: 'selection',
          title: '菜单名称',
          width: 200,
          treeNode: true,
          formatter: (item) => {
            return `${item.row.name}`
          },
        },
        {
          field: 'description',
          title: '菜单描述',
          width: 200,
          align: 'center',
        },
        { field: 'href', title: '地址', width: 200, align: 'center' },
        {
          field: 'redirectUrl',
          title: '重定向地址',
          width: 200,
          align: 'center',
        },
        { field: 'icon', title: '图片', width: 200, align: 'center' },
        { field: 'component', title: '菜单组件', width: 200, align: 'center' },
        { field: 'type', title: '类型', width: 200, align: 'center' },
        {
          field: 'updatedTime',
          title: '修改时间',
          width: 200,
          align: 'center',
        },
        { field: 'updatedBy', title: '修改人', width: 200, align: 'center' },
        {
          field: 'createdTime',
          title: '创建时间',
          width: 200,
          align: 'center',
        },
        { field: 'createdBy', title: '创建人', width: 200, align: 'center' },
        {
          title: '操作',
          width: 250,
          fixed:"right",
          align: 'center',
          slots: {
            default: 'addButton',
          },
        },
      ],

---

下部分逻辑处理部分。主要做的处理是根据我自己的业务要求，不能跨级拖拽改写的，只能同级拖拽，父级的子不能拖进同一子级下面。

其他用法看下官网，链接如下：

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/other/sortableRow

data(){
    return {
        falgLI: true,
        
     }
}

   created () {
            this.treeDrop()
          },
          beforeDestroy () {
            if (this.sortable2) {
              this.sortable2.destroy()
            }
          },
          methods: {
            treeDrop () {
              this.$nextTick(() => {
                const xTable = this.$refs.xTable2
                this.sortable2 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                  handle: '.drag-btn',
                  onEnd: ({ item, oldIndex }) => {
                    const options = { children: 'children' }
                    const targetTrElem = item
                    const wrapperElem = targetTrElem.parentNode
                    const prevTrElem = targetTrElem.previousElementSibling
                    const tableTreeData = this.tableTreeData
                    const selfRow = xTable.getRowNode(targetTrElem).item
                    const selfNode = XEUtils.findTree(tableTreeData, row => row === selfRow, options)
                    if (prevTrElem) {
                      // 移动到节点
                      const prevRow = xTable.getRowNode(prevTrElem).item
                      const prevNode = XEUtils.findTree(tableTreeData, row => row === prevRow, options)
                      if (XEUtils.findTree(selfRow[options.children], row => prevRow === row, options)) {
                        // 错误的移动
                        const oldTrElem = wrapperElem.children[oldIndex]
                        wrapperElem.insertBefore(targetTrElem, oldTrElem)
                        return this.$XModal.message({ content: '不允许自己给自己拖动！', status: 'error' })
                      }
                      const currRow = selfNode.items.splice(selfNode.index, 1)[0]
                      if (xTable.isTreeExpandByRow(prevRow)) {
                        // 移动到当前的子节点
                        prevRow[options.children].splice(0, 0, currRow)
                      } else {
                        // 移动到相邻节点
                        prevNode.items.splice(prevNode.index + (selfNode.index < prevNode.index ? 0 : 1), 0, currRow)
                      }
                    } else {
                      // 移动到第一行
                      const currRow = selfNode.items.splice(selfNode.index, 1)[0]
                      tableTreeData.unshift(currRow)
                    }
                    // 如果变动了树层级，需要刷新数据
                    this.tableTreeData = [...tableTreeData]
                  }
                })
              })
            }
          }
        }
        

---