通过sortablejs实现文章来源：https://www.toymoban.com/news/detail-813714.html
1.安装sortablejs
npm install sortablejs --save2.设置 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文章来源地址https://www.toymoban.com/news/detail-813714.html
到了这里，关于实现ElementUI tab标签可拖拽的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
