vue项目中基于elm树形数据表格组件，实现树状表格的拖拽排序功能

<template>
  <div class="app-container" v-loading="loading">
    <el-button type="primary" @click="handleAddItem">新增菜单</el-button>
    <el-table
      :key="tableKey"
      row-key="id"
      :data="allRouters"
      ref="allRouters"
      style="width: 100%;margin-top:30px;"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- <el-table-column label="id" prop="id" width="50" /> -->
      <el-table-column align="center" label="菜单标题" width="200">
        <template slot-scope="scope">
          {
   {
    scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="图标" width="50">
        <template slot-scope="scope">
          <i :class="'el-icon-' + scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="组件路径">
        <template slot-scope="scope">
          {
   {
    scope.row.path }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="菜单类型" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1">目录</el-tag>
          <el-tag type="warning" v-else>菜单</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="handleDelete(scope)"
            >删除</el-button
          >
          <el-button
            draggable="true"
            @dragstart="dragstart(scope.row)"
            @dragend="dragend(scope.row)"
            icon="el-icon-rank"
            circle
            @click="dianwodrag(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑菜单' : '新建菜单'"
    >
      <el-form :model="model" label-width="80px" label-position="left">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="model.type">
            <el-radio-button :label="1">目录</el-radio-button>
            <el-radio-button :label="2">菜单</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上级目录">
          <el-cascader
            v-model="model.parentId"
            :options="options"
            :props="{ checkStrictly: true }"
            clearable
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="选择图标">
          <el-autocomplete
            v-model="model.icon"
            placeholder="请选择图标"
            :fetch-suggestions="querySearch"
            clearable
            @select="handleSelect"
          >
            <template slot="prepend">
              <i :class="'el-icon-' + model.icon" />
            </template>
            <template slot-scope="{ item }">
              <i :class="'el-icon-' + item" />
              <span>{
   {
    item }}</span>
            </template>
          <