vue-admin-template的tagsview标签页怎么实现拖拽

Vue-admin-template中的`tagsview`组件通常是一个基于Element UI的标签页管理组件，它本身并不直接支持原生的拖拽功能。然而，你可以通过第三方库如`vue-draggable`或`vuedraggable`来实现组件内标签的拖拽。

以下是基本步骤：

1. 安装所需库：

   npm install element-ui vuedraggable --save

2. 在`tagsview`的子组件或模板中引入并使用`vuedraggable`：

   <draggable :list="tags" @change="handleDragChange">
     <transition-group tag="div" name="tag">
       <template v-for="(tag, index) in tags">
         <el-tag draggable :key="index">{{ tag.text }}</el-tag>
       </template>
     </transition-group>
   </draggable>

3. 配置`vuedraggable`属性和事件处理器：

   import draggable from 'vuedraggable';

   export default {
     components: {
       draggable,
     },
     data() {
       return {
         tags: [
           { text: 'Tag 1', id: 1 },
           { text: 'Tag 2', id: 2 },
           //...
         ],
       };
     },
     methods: {
       handleDragChange(newItems) {
         // 当拖拽完成时，更新数据状态
         this.tags = newItems;
       },
     },
   }

4. 如果需要存储拖拽后的顺序到服务器或本地状态，可以在`handleDragChange`中处理。

注意，这只是一个基础示例，实际应用中可能还需要处理一些边界情况和兼容性问题。同时，由于`vue-admin-template`可能会有特定的组织结构，你可能需要调整上述代码以适应项目需求。