实现ElementUI tab标签可拖拽

最新推荐文章于 2023-12-25 17:51:35 发布

Jyann~

最新推荐文章于 2023-12-25 17:51:35 发布

阅读量1.7k

点赞数 1

分类专栏： Vue 前端 elementUI 文章标签：前端 ui Powered by 金山文档

本文链接：https://blog.csdn.net/qq_34569497/article/details/129143305

版权

前端同时被 3 个专栏收录

173 篇文章 14 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

elementUI

8 篇文章 0 订阅

订阅专栏

通过sortablejs实现

1.安装sortablejs

npm install sortablejs --save

2.设置 id="drag-tab"便于获取当前tab

    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="removeTab"
      @tab-click="switchTab"
      id="drag-tab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>

3.实现拖拽

onMounted(()=>{
  dragTab();
});

const dragTab = () =>{
    const tab = document.querySelector("#drag-tab .el-tabs__nav"); //获取需要拖拽的tab
    Sortable.create(tab, {
      //oldIIndex拖放前的位置， newIndex拖放后的位置 , editableTabs为遍历的tab签
      onEnd({ newIndex, oldIndex }) {
        const currTab = editableTabs.value.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
        editableTabs.value.splice(newIndex, 0, currTab); 
        editableTabsValue.value = editableTabs.value[newIndex].name;// 设置当前活动tab名称
        router.push({path:editableTabsValue.value});//main区页面和tab标签联动
      },
    });
}

参考：https://blog.csdn.net/wangjiecsdn/article/details/121995534