去掉el-tabs自带的边框
时间: 2023-11-12 09:56:43 浏览: 127
你可以在 el-tabs 上加一个自定义的类,比如说 "no-border",然后在 CSS 样式中设置该类的边框为 none,就可以去掉 el-tabs 自带的边框了。
CSS 代码示例:
```css
.no-border .el-tabs__header {
border-bottom: none;
}
```
HTML 代码示例:
```html
<el-tabs class="no-border">
<!-- 这里放 el-tabs 的内容 -->
</el-tabs>
```
相关问题
el-tabs下划线样式去掉
在Element UI的el-tabs组件中,可以通过自定义样式来去掉下划线样式。具体的步骤如下:
1. 首先,在el-tabs组件外部包裹一个自定义的容器,例如一个div元素,给该容器添加一个类名,例如"custom-tabs"。
2. 然后,在你的CSS文件中或者style标签中,使用该类名来选择该容器,并设置其子元素el-tabs-nav的border-bottom属性为none,即可去掉下划线样式。
示例代码如下:
HTML:
```html
<div class="custom-tabs">
<el-tabs>
<!-- tabs内容 -->
</el-tabs>
</div>
```
CSS:
```css
.custom-tabs .el-tabs-nav {
border-bottom: none;
}
```
这样就可以去掉el-tabs组件的下划线样式了。
el-tabs在el-dialog
el-tabs可以在el-dialog中使用。在el-dialog中使用el-tabs时,需要注意以下几点:
1. 如果el-dialog中包含el-tabs时关闭时浏览器卡死问题,可以尝试在el-dialog中使用destroy-on-close属性,即在el-dialog上添加属性destroy-on-close="true",这样在关闭el-dialog时会销毁el-tabs,避免内存泄漏和浏览器卡死问题。
2. 如果想要在el-tabs处切换按钮所在行添加其他的内容,可以在el-tabs外部包裹一个div,然后在这个div中添加其他的内容,例如:
```html
<el-dialog title="Dialog Title" :visible.sync="dialogVisible" width="30%" destroy-on-close="true">
<div>
<span>其他内容</span>
<el-tabs>
<el-tab-pane label="Tab 1">Tab 1 Content</el-tab-pane>
<el-tab-pane label="Tab 2">Tab 2 Content</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
```
相关推荐
![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)