Tabs 组件换行展示

Element UI 的 Tabs 组件默认不支持标签页标题超出容器宽度时换行展示，但可以利用一些 CSS 样式来实现

  <div class="tab-container">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tabs v-model="activeSecondTab" @tab-click="handleClick">
        <el-tab-pane label="自我管理" name="first">自我管理</el-tab-pane>
        <el-tab-pane label="门店管理" name="second">门店管理</el-tab-pane>
        <el-tab-pane label="城市管理" name="third">城市管理</el-tab-pane>
    </el-tabs>
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
   </div>

data里面

activeTab: '动态标签1',
activeSecondTab: "动态标签3",

css如下

.tab-container {
  width: 100%;
}

.el-tabs__nav{
    display: flex !important;
    flex-wrap: wrap !important;
}

效果图如下