父管控 tab + 复用子组件 + 动态传参，vue中使用el-tab组件，动态渲染组件，点击tab时才渲染对应组件，并保持激活状态

最近用el-tab写了一个页面。el-tab-pane中的组件，会默认同时渲染。 刚好渲染的表格组件数据量太大，服务端接口性能不够，卡死了。于是前端控制，只有在点击tab，才渲染对应的组件。

主要是用v-if控制组件的渲染。

判断语句是v-if="renderedTabs.includes(tab.componentName + '-' + index)"

renderedTabs中存的是，已经点过的tab。

下面贴一下完整的代码，处理逻辑比较简单。renderedTabs中默认存activeTab。当用户点击tab时，在handleTabClick方法中，把点击的tab名称，存入renderedTabs中。

这样判断语句就会为true，并且渲染组件。

<template>
  <div>
    <el-tabs type="card" v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="(tab, index) in tabList"
        :key="tab.componentName + '-' + index"
        :label="tab.name"
        :name="tab.componentName + '-' + index"
      >
        <component
          v-if="renderedTabs.includes(tab.componentName + '-' + index)"
          :is="tab.componentName"
          :ref="tab.componentName"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import caseCostList from './components/caseCostList'

export default {
  name: 'ComponentName',
  components: { caseCostList },
  data() {
    return {
      activeTab: 'caseCostList-0',
      tabList: [],
      renderedTabs: ['caseCostList-0']
    }
  },

  mounted() {
    this.initTabCom()
  },

  methods: {
    initTabCom() {
      const tmpTabList = [
        { name: "组件1", componentName: "caseCostList" },
        {  name: "组件2", componentName: "caseCostList" }
      ]
      this.tabList = tmpTabList
    },
    handleTabClick(com) {
      if (!this.renderedTabs.includes(com.name)) {
        this.renderedTabs.push(com.name)
      }
    }
  }
}
</script>

备注

这个语句是用来动态渲染组件的 <component :is='tab.componentName'></component>