el-tabs 延迟加载

Vue的el-tabs组件默认情况下会在页面加载时同时加载所有的标签页内容，如果标签页内容比较多或者比较复杂，会导致页面加载速度变慢，影响用户体验。因此，我们可以使用Vue的异步组件和懒加载技术来实现el-tabs的延迟加载。

具体实现方法如下：

1. 在el-tabs组件中，将标签页内容的slot改为异步组件的形式，即使用Vue的`<component :is="componentName">`语法来动态加载组件。

2. 在异步组件中，使用Vue的`Vue.lazy()`方法来实现懒加载，即只有在需要显示该标签页内容时才会加载该组件。

下面是一个示例代码：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="Tab 1" name="1">
      <component :is="tab1Component"></component>
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">
      <component :is="tab2Component"></component>
    </el-tab-pane>
    <el-tab-pane label="Tab 3" name="3">
      <component :is="tab3Component"></component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tab1Component: null,
      tab2Component: null,
      tab3Component: null
    }
  },
  methods: {
    handleClick(tab, event) {
      // 点击标签页时动态加载组件
      if (tab.name === '1') {
        import('./Tab1.vue').then((module) => {
          this.tab1Component = module.default
        })
      } else if (tab.name === '2') {
        import('./Tab2.vue').then((module) => {
          this.tab2Component = module.default
        })
      } else if (tab.name === '3') {
        import('./Tab3.vue').then((module) => {
          this.tab3Component = module.default
        })
      }
    }
  }
}
</script>

在上面的代码中，我们使用了`import()`方法来动态加载组件，当用户点击标签页时，才会异步加载对应的组件。这样就可以实现el-tabs的延迟加载了。