Vue.js Element UI Tabs 组件：选中“全部”标签页未显示数据问题解决

Vue.js Element UI Tabs 组件：选中'全部'标签页未显示数据问题解决

在使用 Element UI 的 Tabs 组件时，我们经常需要添加一个'全部'标签页来显示所有数据。然而，有时候我们会遇到选中'全部'标签页后，数据并没有显示出来，而是显示一个转圈的加载状态。

问题分析：

这段代码中，carouselTypeSelected 是一个响应式的变量，用来保存当前选中的标签页的值。当你选中'全部'标签页时，它的值会变为-1。然后，handleClick 方法会被调用，你需要检查一下这个方法的实现，看看是否正确处理了选中'全部'标签页的情况。

解决方案：

1. 检查 handleClick 方法: 确保 handleClick 方法能够正确地处理选中'全部'标签页的情况。例如，可以根据 carouselTypeSelected 的值来加载对应的数据，或者在 carouselTypeSelected 为 -1 时，显示所有数据。

2. 使用 v-if 条件判断数据显示: 在每个标签页的内容区域添加一个 v-if 条件，根据 carouselTypeSelected 的值来判断是否显示数据。例如：

<el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index">
  <template #label>
    <div class="cat-tab">
      <span>{{ item.dictLabel }}</span>
    </div>
  </template>
  <template v-if="carouselTypeSelected === index">
    <!-- 显示对应的数据 -->
  </template>
</el-tab-pane>

代码示例:

<el-tabs v-model="carouselTypeSelected" :stretch="false" @tab-change="handleClick">

        <el-tab-pane name="-1">
          <template #label>
            <div class="cat-tab">
              <span>全部</span>
            </div>
          </template>
        </el-tab-pane>

        <el-tab-pane v-for="(item, index) in carouselType" :label="item.dictLabel" :name="index">
          <template #label>
            <div class="cat-tab">
              <span>{{ item.dictLabel }}</span>
            </div>
          </template>
          <template v-if="carouselTypeSelected === index">
            <!-- 显示对应的数据 -->
          </template>
        </el-tab-pane>
      </el-tabs>

通过以上方法，你可以解决选中'全部'标签页后数据未显示的问题，并确保所有数据能够正确地显示出来。