el-col固定显示在当前tab页的顶部
时间: 2024-05-11 22:19:22 浏览: 63
解决vue中el-tab-pane切换的问题
5星 · 资源好评率100%
要实现el-col固定显示在当前tab页的顶部,可以使用CSS的`position: fixed`属性和`z-index`属性。首先,将el-col元素的`position`属性设置为`fixed`,这将使元素在滚动时保持固定位置。然后,使用`z-index`属性来设置el-col元素的堆叠顺序,确保它在其他元素之上。
以下是一个示例代码:
```html
<template>
<div>
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1" name="tab1">
<el-col class="fixed-col">I am a fixed column!</el-col>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis ipsum at risus sodales, eu egestas leo tincidunt. Suspendisse dignissim metus non quam efficitur, id dapibus enim commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed quis risus vel enim feugiat dapibus. Sed vitae libero at tellus ullamcorper elementum. Integer varius enim quis lectus lacinia, eu lacinia sapien sollicitudin. Curabitur varius, arcu vel facilisis consequat, ipsum risus blandit magna, vel fringilla dolor nibh vel arcu.</p>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<p>Ut euismod sapien ut velit placerat, eget commodo odio imperdiet. Donec ultrices a elit eu posuere. Nullam sed semper lorem. Morbi gravida, nunc eu vulputate dictum, nibh nunc placerat metus, nec aliquet mauris sapien ac velit. Suspendisse potenti. Nulla facilisi. Suspendisse ut tincidunt massa. Proin vitae justo in erat rutrum dictum. Proin a lectus eu nisl facilisis mollis vel sit amet purus. Sed euismod vel eros vitae varius. Nam euismod dolor non libero faucibus, quis tincidunt justo commodo. Integer vitae mi lacinia, laoreet urna quis, tempus lorem.</p>
</el-tab-pane>
</el-tabs>
</div>
</template>
<style>
.fixed-col {
position: fixed;
top: 0;
left: 0;
background-color: #fff;
z-index: 999;
width: 100%;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
```
在上面的示例代码中,我们在el-col元素上添加了一个类名`.fixed-col`,并在CSS中设置了`position: fixed`,`top: 0`和`left: 0`来保证它始终显示在页面的顶部。我们还使用`z-index: 999`来确保它在其他元素之上,并添加了一些样式,如背景颜色、宽度、内边距和阴影等。
阅读全文