通过v-for创建的a-tabs组件，不展示默认第一项的解决方法

逆风优雅

已于 2022-02-07 12:18:14 修改

阅读量2k

点赞数

分类专栏：开发小技巧总结文章标签： vue.js elementui javascript

于 2022-02-07 10:57:42 首次发布

本文链接：https://blog.csdn.net/qq_44603011/article/details/122805636

版权

开发小技巧总结专栏收录该内容

148 篇文章 6 订阅

订阅专栏

<a-tabs class="aTabs" style="width: 1920px; height: 814px">
            <a-tab-pane
              class="second_part_ul_li"
              v-for="(v, i) in twiceUlData"
              :key="i"
            >
              <span slot="tab" @click="secondPartChosed(i, v)">
                <img
                  class="second_part_ul_li_img"
                  :src="active === i ? v.img1 : v.img"
                  alt=""
                />
                <p
                  :class="{ second_part_chosed: active === i }"
                  class="second_part_ul_li_p content_font2"
                >
                  {{ v.title }}
                </p>
              </span>
              <div
                class="forth_part"
                style="
                  display: flex;
                  justify-content: center;
                  transform: translateY(-14px);
                "
              >
                <div class="forth_part_left">
                  <h1 class="forth_part_left_h1 content_font1">
                    {{ forth_part_left_h1 }}
                  </h1>
                  <span class="forth_part_left_span content_font2">
                    {{ forth_part_left_span }}
                  </span>
                  <p class="forth_part_left_p">
                    <span class="content_font2">高可靠</span>
                    <span class="content_font2">高可用</span>
                  </p>
                </div>
                <div class="forth_part_right">
                  <div
                    class="forth_part_right_div"
                    v-for="(v, i) in secondDivData"
                    :key="i"
                  >
                    <h1 class="forth_part_right_div_h1 content_font1">
                      {{ v.titile }}
                    </h1>
                    <p class="forth_part_right_div_p1 content_font2">
                      {{ v.content }}
                    </p>
                    <p class="forth_part_right_div_p2">
                      <span class="content_font2">高可靠</span>
                      <span class="content_font2">高可用</span>
                    </p>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>

当前的效果：虽然有选中的状态，但是没有展示第一项。