手动动态改变el-tabs标签页顺序

<template> <div> <p> <el-button type="primary" size="small" @click="addTab(tabs.length)">添加</el-button> </p> <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab"> <el-tab-pane ref="tabs" v-for="(item, index) in tabs" :key="index" :label="'Tab' + tabs[index].sort" :name="index + ''"> <InputSort :tabs="item" @changeSort="changeSort" :maxInput="tabs.length"> </InputSort> </el-tab-pane> </el-tabs> </div> </template> <script> import InputSort from "../components/InputSort"; export default { name: "tabs", components: { InputSort }, data() { return { activeTab: '0', tabs: [{ sort: 1, content: '' }] }; }, methods: { changeSort(e) { // 例如：1234 2改为4 则顺序变为1342；4改为2 则顺序变为1423 this.$nextTick(() => { let currentIndex = this.activeTab * 1 // 当前的序号 let changeIndex = e.sort - 1 // 改变后序号 let tabs = this.tabs; // 改变tabs数组对象顺序（索引） let [a] = tabs.splice(currentIndex, 1) tabs.splice(changeIndex, 0, a) console.log(this.activeTab) this.activeTab = changeIndex + '' // 改变sort数值 tabs.map((item, index) => { item.sort = index + 1 }) // 手动把序号删除为空的时候视为无效修改，依然是原数值 if (e.sort == undefined) { tabs[currentIndex].sort = currentIndex + 1 return } }) // 替换顺序 this.$nextTick(() => { [this.tabs[e.sort - 1], this.tabs[this.activeTab * 1]] = [this.tabs[this.activeTab * 1], this.tabs[e.sort - 1]] this.tabs[this.activeTab * 1].sort = this.activeTab * 1 + 1; this.activeTab = e.sort - 1 + '' }) console.log(e, this.activeTab); }, addTab(val) { console.log(val) if (this.tabs.length >= 10) { alert("最多支持10个Tab") } else { this.tabs.push({ sort: val + 1, content: '' }) } this.activeTab = (this.tabs.length - 1) + '' }, removeTab(targetName) { // targetName读取的是name的值 if (confirm("确认要删除吗？")) { // 需要保留至少一个Tab if (this.tabs.length > 1) { let tabs = this.tabs; let activeName = this.activeTab; //当前位置 if (activeName >= targetName) { activeName = (activeName - 1) + '' } tabs.splice(targetName * 1, 1) this.activeTab = activeName; tabs.map((item, index) => { if (index >= (targetName * 1)) { item.sort = item.sort - 1 } }) this.tabs = tabs } else { alert("请至少保留一个Tab") } } }, } }; </script>