el-tabs如何切换组件，动态切换

  1.场景是点击左边tree的节点，tabs可以动态切换

        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane
            v-for="item in ComponentArr"
            :key="item.key"
            :label="item.label"
            :name="item.name"
          >
            <keep-alive>
              <!-- v-if="activeName === item.name" -->
              <component
                :is="item.components"
                v-if="activeName === item.name"
                :ref="item.name"
                @hook:created="myCreated"
                @seach="seach"
                @reset="reset"
              />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>

v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。

 

1. 首先，它检查datatype是否包含数字5。如果包含，则执行以下操作：
2. 然后，它将一个新的对象添加到ComponentArr数组

 2.动态导入组件可以这么写

 

loading是一个Vue组件的属性，它表示一个组件是否处于加载状态。当组件正在加载数据时，它会显示一个加载指示器。

delay是一个Vue组件的属性，它表示加载指示器在组件加载完成后延迟显示的时间。这个属性可以用来控制加载指示器的显示和隐藏，从而实现动画效果。例如，当组件加载完成时，加载指示器会先隐藏一段时间，然后再显示，这样可以增加视觉上的延迟效果