iview中 Tabs 标签页指定显示对应的TabPane页面以及高度随内容撑开问题

時間不夠以後

已于 2022-09-05 12:14:21 修改

阅读量6k

点赞数 6

分类专栏： vue 文章标签： view design 动画 css3

于 2020-06-19 11:12:21 首次发布

本文链接：https://blog.csdn.net/weixin_43972213/article/details/106852375

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1. 设置指定显示页面

<Tabs ref="tabs" :animated="false">
  <Tab-pane label="标题1" name="MigrationList">
      <MigrationList ref="migrationListRef"/>
    </Tab-pane>
    <Tab-pane label="标题2" name="AddMigrationList">
      <AddMigrationList/>
    </Tab-pane>
    <Tab-pane label="标题3" name="ScheduleList">
      <ScheduleList/>
    <div v-show="exceptionList.length">
        <br/>
        <ExceptionList/>
    </div>
    </Tab-pane>
  </Tabs>

this.$refs.tabs.activeKey = 'AddMigrationList'

2. 高度随内容撑开问题

当animated: true时，高度不能随着内容的高度撑开，反而是由最高的tabPane决定的。

使用动画时
主要是通过translateX来进行水平方向的移动，来保证显示与隐藏
不使用动画时
切换时，会通过 display: none 使不该显示的tab项隐藏

可能是因为，使用动画的时候，不好控制display，从而导致高度被最高的那一个撑开了

3. 通过v-show打开动画效果,解决tab各自高度控制

在这里插入图片描述

<template>
  <Tabs @on-click="clickTab" value="name1">
    <TabPane label="标签一" name="name1" >
      <div style="height: 100px; backgroundColor: blu;border: 1px solid black;" v-show="tabName === 'name1'">
        标签一的内容
      </div>
    </TabPane>
    <TabPane label="标签二" name="name2">
      <div v-show="tabName === 'name2'" style="backgroundColor: blu;border: 1px solid black;">
        标签二的内容
      </div>
    </TabPane>
    <TabPane label="标签三" name="name3">
      <div style="height: 100px; backgroundColor: blu;border: 1px solid black;" v-show="tabName === 'name3'">
        标签三的内容
      </div>
    </TabPane>
  </Tabs>
</template>
<script>
  export default {
    data () {
      return {
        tabName: 'name1'
      }
    },
    methods: {
      clickTab(name) {
        this.tabName = name
      }
    }
  }
</script>