ElementUI修改el-tabs标签页组件样式

╰+哭是因爲堅強的太久メ 2022-09-04 00:51 1350阅读 0赞

官方示例：[https://element.eleme.cn/\#/zh-CN/component/tabs][https_element.eleme.cn_zh-CN_component_tabs]

效果图：

![20210809152310946.png][]

<el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            :stretch="false"
            style="color: white; height: 300px; width: 100%;caret-color: transparent;"
          >
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"
              >定时任务补偿</el-tab-pane
            >
          </el-tabs>

修改css：

::v-deep .el-tabs__content {
        overflow: visible;
      }  
      ::v-deep .el-tabs__item {
        color: white;
      }
      ::v-deep .el-tabs__item.is-active {
        color: #15cbf3;
      }
      ::v-deep .el-icon-arrow-left {
        color: white;
      }
      ::v-deep .el-icon-arrow-right {
        color: white;
      }
      ::v-deep .el-tabs__nav-wrap::after {
        height: 0;
      }
      ::v-deep .el-tabs__active-bar {
        background-color: #15cbf3;
      }

[https_element.eleme.cn_zh-CN_component_tabs]: https://element.eleme.cn/#/zh-CN/component/tabs
[20210809152310946.png]: /images/20220829/ff93fbf836ac449584d0a68bb16f9baa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1350人围观）

还没有评论，来说两句吧...

相关阅读

相关修改elementUI“分页组件”的默认样式

果图 ![在这里插入图片描述][2019090311253044.png]  <div class="pager-box"> ...

你的名字/ 2024年04月18日 04:36/ 0 赞/ 76 阅读

相关 elementui默认样式修改的问题

修改elementui默认的css颜色。我用的第一种方法参考： [https://www.cnblogs.com/my466879168/p/12091439.html]

水深无声/ 2023年03月03日 06:31/ 0 赞/ 31 阅读

相关 ElementUI Tabs标签页去除样式中的border 横向和竖向

横向： ![在这里插入图片描述][20201210101013599.png_pic_center] ![在这里插入图片描述][20210204112529160.p

快来打我*/ 2022年12月27日 09:20/ 0 赞/ 618 阅读

相关 audio标签的样式修改

由于H5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式

水深无声/ 2022年11月29日 05:41/ 0 赞/ 375 阅读

相关 vue ElementUI Tabs 标签页的使用

先在前面附上官网链接 > [ElementUI Tabs 标签页][ElementUI Tabs] 下面是自己写的实际应用在每个tab页嵌套一个form表单，设

叁歲伎倆/ 2022年11月20日 08:14/ 0 赞/ 925 阅读

相关 ElementUI table 样式修改

一、概述 element-ui table 默认是白色背景，现在需要修改为黑色背景，白色文字。二、代码实现 css样式 <style> /

我不是女神ヾ/ 2022年11月01日 00:46/ 0 赞/ 38 阅读

相关 ElementUI修改el-tabs标签页组件样式

官方示例：[https://element.eleme.cn/\/zh-CN/component/tabs][https_element.eleme.cn_zh-CN_comp

╰+哭是因爲堅強的太久メ/ 2022年09月04日 00:51/ 0 赞/ 1351 阅读

相关 elementui修改单元格的样式

废话不多说直接上代码在el-table中定义样式函数，js中写函数 <el-table :cell-style=

港控/mmm°/ 2022年05月17日 11:38/ 0 赞/ 350 阅读

相关 ElementUI分页组件+Vue

一. ElementUI分页组件 1 官网官网地址：http://element-cn.eleme.io/\/zh-CN 2 入门案例：第一步：创建vu

痛定思痛。/ 2022年04月17日 06:42/ 0 赞/ 437 阅读

相关 elementui分页组件的使用

关键点：使用slice函数，其介绍见：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Gl

本是古典何须时尚/ 2021年07月25日 12:27/ 0 赞/ 784 阅读