Anted a-tabs内容高度设置100%

最新推荐文章于 2025-05-07 17:42:57 发布

花开富贵城

最新推荐文章于 2025-05-07 17:42:57 发布

阅读量641

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/qq_42498352/article/details/142435976

版权

<template>
  <div style="height: 100%;">
    <div class="flex-wrap">
      <div class="card-container flex-item flex1">
        <a-tabs v-model:activeKey="activeKey" type="card" class="tabs">
          <a-tab-pane v-for="item in tabList" :key="item.value" :tab="item.title" force-render>{{
            item.value }}</a-tab-pane>
        </a-tabs>
      </div>

      <div class="card-container flex-item">
        <a-tabs v-model:activeKey="infoKey" type="card" class="tabs tabs-r">
          <a-tab-pane v-for="item in infoList" :key="item.value" :tab="item.title" force-render>{{
            item.value }}</a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const activeKey = ref("value1");
const tabList = reactive([
  { title: "活动", value: "value1" },
  { title: "详细资料", value: "value2" }
]);

const infoKey = ref("value1");
const infoList = reactive([
  { title: "重要信息", value: "value1" }
]);
</script>

<style lang="less" scoped>
.flex-wrap {
  display: flex;
  height: calc(100% - 142px); // 减去页面上方内容高度

  .flex1 {
    flex: 1
  }

  .flex-item {
    padding-top: 15px;
    background-color: #f5f6f9;

    .tabs {
      border: 1px solid #e6e6e6;
      height: 100%;
    }

    .tabs-r {
      width: 300px;
      height: 100%;
      margin-left: 15px;
    }
  }
}
</style>

页面预览：