el-tabs 高度
时间: 2023-10-28 17:00:29 浏览: 82
el-tabs的高度是依赖其父组件的高度的。当多个tabs时,除了第一个tabs的高度是根据内容实际值来确定外,其他tabs的高度默认为0。这会导致在mounted时,已经赋值给table的高度只有第一个tabs的table能够正常显示,其他tabs的table无法显示出来。
为了让el-tabs自适应高度并显示正常,我们需要给el-table设置一个具体的高度值。这样,在数据条数超过el-table的高度时,el-table会出现滚动条,而不是整个页面出现滚动条。
另外,你可以在tabs的子组件中设置一个属性,通过该属性传递父组件的高度给子组件。子组件显示时,可以通过计算(减去其他部分的高度,比如底部查询或操作高度,底部分页高度)来确定el-tabs的高度。这样可以确保el-tabs在不同情况下都能自适应高度并显示正常。
相关问题
el-tabs的高度自适应怎么做
对于el-tabs的高度自适应,可以使用CSS的flex布局来实现。先将el-tabs的容器设置为display:flex,并且flex-direction设置为column,这样el-tabs会按照垂直方向排列。然后将el-tabs容器的高度设置为100%,这样el-tabs容器会占据整个父元素的高度。最后给el-tabs设置flex:1,这样el-tabs会自动充满父元素高度,实现高度自适应。下面是示例代码:
```html
<div class="el-tabs-container">
<el-tabs style="flex:1;">
<!-- tabs内容 -->
</el-tabs>
</div>
```
```css
.el-tabs-container {
display: flex;
flex-direction: column;
height: 100%;
}
```
el-tabs 下划线居中
要将 el-tabs 组件下划线居中,可以通过以下步骤实现:
1. 定义一个 CSS 类来控制下划线样式。例如,我们可以创建一个名为 "center-underline" 的类,如下所示:
```css
.center-underline .el-tabs__item.is-active::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
content: '';
width: 20px; /* 下划线的宽度 */
height: 2px; /* 下划线的高度 */
background-color: #409eff; /* 下划线的颜色 */
}
```
2. 在 el-tabs 组件的外层包裹一个父元素,并为该父元素添加 "center-underline" 类。例如:
```html
<div class="center-underline">
<el-tabs>
<!-- el-tabs 的选项卡内容 -->
</el-tabs>
</div>
```
3. 这样,下划线就会居中显示在选项卡文本下方了。
注意:上述代码中的样式仅为示例,你可以根据实际需求进行调整和修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)