网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

el-tab如何设置颜色样式

时间:2026-02-13 21:31:24

1、修改全局(主颜色或者样式)

//自定义主题

el-tab如何设置颜色样式

2、//修改样式

在App.vue文件中引入

import 'css/override-element-ui.css';(外部样式)//override-element-ui是自己新建的css或者 (内部样式)// el-tabs__item 是F12检查页面代码时可以看到elementui组件tabs对应的样式

el-tab如何设置颜色样式

3、style>

.el-tabs__item{

padding:0 10px;

}

</style>

el-tab如何设置颜色样式

4、修改局部(样式)组件demo.vue

<template>

 <div class="market_out">

     <el-tabs v-model="activeName"  class="tabs_title">

          <el-tab-pane :label="$t('text.all')" name="first"></el-tab-pane>

          <el-tab-pane :label="$t('market.optional')" name="second"></el-tab-pane>

      </el-tabs>

el-tab如何设置颜色样式

5、</div>

</template>

<style scoped>

market_out.el-tabs__item{

padding:0 10px;

}

</style>

el-tab如何设置颜色样式

6、//局部修改 market_out .el-tabs__item 这种写法,不影响其他组件使用默认的tabs控件

el-tab如何设置颜色样式

el-tab如何设置颜色样式

© 2026 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com