其他分享
首页 > 其他分享> > 通过v-for创建的a-tabs组件,不展示默认第一项操作

通过v-for创建的a-tabs组件,不展示默认第一项操作

作者:互联网

<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>

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

当点击tab选项的时候,就会显示

 

 上面问题的解决方法:

将代码中默认展示的第一项数据去除:

 

标签:展示,tabs,默认,part,第一项,组件,forth,left
来源: https://blog.csdn.net/qq_44603011/article/details/122805636