element plus中的tabs 去掉底部的下划线
时间: 2023-08-05 18:07:43 浏览: 90
你可以通过设置 `tab-bar-style` 属性来去掉 Element Plus Tabs 组件底部的下划线。具体做法如下:
```html
<template>
<el-tabs tab-bar-style="border: none;">
<el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
<el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
<el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
</el-tabs>
</template>
```
在 `el-tabs` 组件中添加 `tab-bar-style` 属性,将 `border` 设置为 `none` 即可去除底部的下划线。
相关问题
vue element el-tabs 去掉底部的下划线和切换时的下划线
要去掉el-tabs组件底部的下划线和切换时的下划线,你可以使用以下两种方法:
1. 使用CSS样式覆盖默认样式:
```css
.el-tabs__header::after {
border-bottom: none;
}
.el-tabs__item.is-active {
border-bottom: none;
}
```
2. 通过设置组件属性来实现:
```html
<el-tabs type="border-card" :tab-position="position" :stretch="false" style="border: none">
<el-tab-pane label="tab1"></el-tab-pane>
<el-tab-pane label="tab2"></el-tab-pane>
<el-tab-pane label="tab3"></el-tab-pane>
</el-tabs>
```
其中,`:stretch="false"` 可以去掉切换时的下划线, `style="border: none"` 可以去掉底部的下划线。
element el-tabs 底部的下划线变细
可以通过修改 `border-bottom-width` 属性来调整 `el-tabs` 底部下划线的粗细。例如,将下划线变为原来的一半粗细,可以在 CSS 中添加以下代码:
```css
.el-tabs__header:before {
border-bottom-width: 1px; /* 将原来的 2px 改为 1px */
}
```
如果只想修改某个特定的 `el-tabs` 实例的下划线粗细,可以给该实例添加一个自定义的 class,并在 CSS 中使用该 class 来修改样式。例如:
```html
<el-tabs class="my-tabs">
<!-- ... -->
</el-tabs>
```
```css
.my-tabs .el-tabs__header:before {
border-bottom-width: 1px; /* 将下划线粗细改为 1px */
}
```