vue2 el-menu可拖拽

Vue2和ElementUI结合使用时，可以通过使用el-draggable插件实现el-menu的拖拽功能。

安装el-draggable插件：

npm install vuedraggable --save

然后在Vue组件中引入el-draggable组件，如下：

<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
    <draggable v-model="menus">
      <template v-for="item in menus">
        <el-submenu v-if="item.children" :index="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <draggable v-model="item.children">
            <template v-for="child in item.children">
              <el-menu-item :index="child.path">{{ child.name }}</el-menu-item>
            </template>
          </draggable>
        </el-submenu>
        <el-menu-item v-else :index="item.path">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </draggable>
  </el-menu>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      menus: [
        {
          name: 'Dashboard',
          path: '/dashboard',
          icon: 'el-icon-menu',
          children: []
        },
        {
          name: 'Menu 1',
          path: '/menu1',
          icon: 'el-icon-menu',
          children: [
            {
              name: 'Menu 1-1',
              path: '/menu1/menu1-1'
            },
            {
              name: 'Menu 1-2',
              path: '/menu1/menu1-2'
            }
          ]
        },
        {
          name: 'Menu 2',
          path: '/menu2',
          icon: 'el-icon-menu',
          children: [
            {
              name: 'Menu 2-1',
              path: '/menu2/menu2-1'
            },
            {
              name: 'Menu 2-2',
              path: '/menu2/menu2-2'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

在上面的代码中，我们使用了el-draggable组件包裹了el-menu组件，并且在el-submenu和el-menu-item组件中也使用了el-draggable组件，这样就可以实现el-menu的拖拽功能了。

需要注意的是，如果你使用了Vue3，那么需要使用vuedraggable@next版本。另外，如果你使用的是Vue3和Element Plus组件库，那么可以直接使用el-draggable组件，无需安装插件。