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

 

场景：

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;
    }
                    
}

 

 

 

 

 

 

 

搜索

复制