SOURCE

var Main = {
  data () {
            return {
              showHelpTip2: false,
              tableTreeData: [],
              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: 'name', title: 'Name', treeNode: true },
                { field: 'size', title: 'Size' },
                { field: 'type', title: 'Type' },
                { field: 'date', title: 'Date' }
              ]
            }
          },
          created () {
            this.tableTreeData = window.MOCK_DATA_LIST.slice(0)
            this.treeDrop()
          },
          beforeDestroy () {
            if (this.sortable) {
              this.sortable.destroy()
            }
          },
          methods: {
            treeDrop () {
              this.$nextTick(() => {
                let xTable = this.$refs.xTable
                this.sortable2 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
                  handle: '.drag-btn',
                  onEnd: ({ item, oldIndex }) => {
                    let options = { children: 'children' }
                    let targetTrElem = item
                    let wrapperElem = targetTrElem.parentNode
                    let prevTrElem = targetTrElem.previousElementSibling
                    let tableTreeData = this.tableTreeData
                    let selfRow = xTable.getRowNode(targetTrElem).item
                    let selfNode = XEUtils.findTree(tableTreeData, row => row === selfRow, options)
                    if (prevTrElem) {
                      // 移动到节点
                      let prevRow = xTable.getRowNode(prevTrElem).item
                      let prevNode = XEUtils.findTree(tableTreeData, row => row === prevRow, options)
                      if (XEUtils.findTree(selfRow[options.children], row => prevRow === row, options)) {
                        // 错误的移动
                        let oldTrElem = wrapperElem.children[oldIndex]
                        wrapperElem.insertBefore(targetTrElem, oldTrElem)
                        return this.$XModal.message({ message: '不允许自己给自己拖动！', status: 'error' })
                      }
                      let 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 {
                      // 移动到第一行
                      var currRow = selfNode.items.splice(selfNode.index, 1)[0]
                      tableTreeData.unshift(currRow)
                    }
                    // 如果变动了树层级，需要刷新数据
                    xTable.syncData()
                  }
                })
              })
            }
          }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
  <template>
    <div>
        <vxe-grid
          border
          row-key
          ref="xTable2"
          class="sortable-tree-demo"
          :columns="tableColumn"
          :data="tableTreeData"
          :tree-config="{children: 'children'}"></vxe-grid>
    </div>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
        .sortable-tree-demo .drag-btn {
          cursor: move;
          font-size: 12px;
        }
        .sortable-tree-demo .vxe-body--row.sortable-ghost,
        .sortable-tree-demo .vxe-body--row.sortable-chosen {
          background-color: #dfecfb;
        }