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

╰+哭是因爲堅強的太久メ 2022-09-04 00:51 1288阅读 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 条评论，1288人围观）

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

相关阅读

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

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

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

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

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

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

相关 audio标签的样式修改

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

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

相关 vue ElementUI Tabs 标签页的使用

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

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

相关父组件修改子组件的样式

父组件： Father.vue <template> <Child /> </template> 子组件： Child.v

约定不等于承诺〃/ 2022年11月17日 13:36/ 0 赞/ 138 阅读

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

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

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

相关 elementui修改单元格的样式

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

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

相关 ElementUI 分页组件二次封装

更新记录：修复了删除当前所有数据未触发退回上一页问题。改善了调用方式，仅需传入分页对象与绑定查询事件。改为通过 model 更新分页对象。修复

Myth丶恋晨/ 2022年05月08日 23:58/ 0 赞/ 471 阅读

相关 ElementUI分页组件+Vue

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

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

相关 elementui分页组件的使用

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

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