场景:
1、根据管理端设置动态显示tab切换项
2、当只有一个tab项目时隐藏所有tab切换项
官网例子(仅仅是一个例子,为了方便阐述问题)
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"> <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name" > {{item.content}} </el-tab-pane> </el-tabs> <script> export default { data() { return { editableTabsValue: '2', editableTabs: [{ title: 'Tab 1', name: '1', content: 'Tab 1 content' }, { title: 'Tab 2', name: '2', content: 'Tab 2 content' }], tabIndex: 2 } }, methods: { handleTabsEdit(targetName, action) { if (action === 'add') { let newTabName = ++this.tabIndex + ''; this.editableTabs.push({ title: 'New Tab', name: newTabName, content: 'New Tab content' }); this.editableTabsValue = newTabName; } if (action === 'remove') { let tabs = this.editableTabs; let activeName = this.editableTabsValue; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); } } } } </script>
问题1::name=必须为String 类型,否则会报错
vue.runtime.esm.js?430a:619 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with value "0", got Number with value 0.
:name 类型和v-model 值一致但是类型不一致报错
vue.runtime.esm.js?430a:619 [Vue warn]: Invalid prop: type check failed for prop "currentName". Expected String with value "1", got Number with value 1.
问题2: v-model 和 :name的值需要一致,否则不显示tab项
问题3:动态隐藏tab项,本人使用的v-if ,虽然之前官网不建议v-if 和v-for一起使用,但是目前没有找到更好的办法
问题4:只有一个tab项时,隐藏tab
<el-tabs class="el-tabs" :class="{'active': editableTabs.length < 2 }" ref="tabs">
.el-tabs.active{ .el-tabs__header{ display:none; } }