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

 

 

 

 

 

 

 

搜索

復制