【el-tabs循环生成el-tab-pane，一行无法完全展示时（内容标签页非常多），实现换行展示。

上面是效果图。

下面是使用固定数据写的一个Demo,具体需要接口返回的数据，视情况自己替换。

<template>
  <div>
    <el-tabs v-model="activeName"
             @tab-click="handleClick">

      <el-tabs v-model="activeName"
               @tab-click="handleClick">

        <el-tab-pane v-for="item in tabsArr22"
                     :key="item.name"
                     :label="item.label"
                     :name="item.name">
          <component v-if="item.name"
                     :is="item.name" />
        </el-tab-pane>
      </el-tabs>

      <el-tab-pane v-for="item in tabsArr"
                   :key="item.name"
                   :label="item.label"
                   :name="item.name">
        <component v-if="item.name"
                   :is="item.name" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  <script>
import interfaceg from './interfaceg.vue'
import zsgl from './zsgl.vue'
import upGkmyd from '@/components/upGkmyd.vue'
import fblh from './fblh.vue'
import hbsc from './hbsc.vue'
import hqfw from './hqfw.vue'
import htfw from './htfw.vue'
import jsgf from './jsgf.vue'
import jxpy from './jxpy.vue'
import projd from './projd.vue'
import rych from './rych.vue'
import sbrj from './sbrj.vue'
import tzjh from './tzjh.vue'
import fxgl from '@/components/fxgl.vue'
import zlmb from '@/components/zlmb.vue'
export default {
  components: {
    interfaceg,
    zsgl,
    upGkmyd,
    fblh,
    hbsc,
    hqfw,
    htfw,
    jsgf,
    jxpy,
    projd,
    rych,
    sbrj,
    tzjh,
    fxgl,
    zlmb
  },
  data () {
    return {
      activeName: '',
      tabsArr: [],
      tabsArr22: []
    }
  },

  created () {
// 模拟动态数据
    setTimeout(() =>
      this.tabsArr = [
        {
          name: 'interfaceg',
          label: '接口管理'
        },
        {
          name: 'upGkmyd',
          label: '提升顾客满意度创新措施'
        },
        {
          name: 'zsgl',
          label: '知识管理'
        },
        {
          name: 'fxgl',
          label: '风险管理'
        },
        {
          name: 'zlmb',
          label: '质量目标'
        },
        {
          name: 'projd',
          label: '项目关键质量节点评审计划'
        },
        {
          name: 'tzjh',
          label: '提资计划管理'
        },
        {
          name: '',
          label: '项目总体进度计划'
        },
        {
          name: 'htfw',
          label: '项目合同范围及客户'
        },
        {
          name: 'sbrj',
          label: '设备软件资源'
        },
      ]
      , 0)

// 模拟动态数据
    setTimeout(() =>
      this.tabsArr22 = [{
        name: 'jxpy',
        label: '奖项培育'
      },
      {
        name: 'rych',
        label: '项目人员，专业策划'
      },
      {
        name: 'hqfw',
        label: '后期服务策划'
      },
      {
        name: 'jsgf',
        label: '技术标准规范'
      },
      {
        name: 'hbsc',
        label: '环保、安全生产'
      },
      {
        name: 'fblh',
        label: '项目分包及联合承担工作安排'
      }]
      , 0)


  },
  watch: {
    tabsArr (newVal) {
      if (newVal) {
        // 设置初始激活项
        this.activeName = newVal[0].name
      }
    },
    deep: true
  },
  methods: {
    handleClick (tab, event) {
      // 切换激活项
      this.activeName = tab.name

    }
  },
}
  </script>