【vue】Tabs 标签页使用过程中遇到的问题

场景：

1、根据管理端设置动态显示tab切换项

2、当只有一个tab项目时隐藏所有tab切换项

 官网例子（仅仅是一个例子，为了方便阐述问题）

v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
  pane
    :key="item.name"
    v-for="(item, index) in editableTabs"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}}
  

 问题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

       :class="{'active': editableTabs.length < 2 }"
       ref="tabs">

.el-tabs.active{
    .el-tabs__header{
        display:none;
    }
                    
}

搜索

复制