element-ui el-tabs el-tab-pane 的使用

本文主要是介绍element-ui el-tabs el-tab-pane 的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现效果：1、去掉它的下划线

2、标签切换的蓝色线条

3、字体，鼠标滑过字体、点击的字体

4、如果数据超出，出现左右滑动标签

html

     <div class="activity"><div class="cont"><el-tabsv-if="search && search.length > 0"v-model="first"@tab-click="handleClick"><el-tab-panev-for="(item, index) in search":key="index":label="item.category_name":name="item.id":lazy="true"></el-tab-pane></el-tabs></div></div>

css

  .activity{width:98%;height:58px;background-color: #ffffff;margin:0 auto;margin-top: 34px;display: flex;align-items: center;position: relative;i{font-size: 25px;color:#2d97ff}.lefts{position: absolute;left:18px}.rights{position: absolute;right:18px}.cont{width:100%;height:100%;margin:  0 auto;display: flex;flex-direction:row;font-size: 20px;color: #c8c8c8;span{display: inline-block;height: 100%;display: flex;align-items: center;padding-left: 10px;padding-right: 10px;margin-right: 18px;font-size: 20px;}}}::v-deep {.el-tabs {height: 100%;overflow: hidden;display: flex;overflow: hidden;flex-direction: column;.el-tabs__active-bar{background-color:transparent !important;}.el-tabs__header {padding: 0 5px;height: 100%;margin: 0;.el-tabs__nav-scroll {height: 58px;.el-tabs__nav {width: auto;display: flex;justify-content: space-between;}.el-tabs__item {height: 58px;font-weight: 400;font-size: 20px;padding: 0px 22px;line-height: 58px;margin-right: 42px;color:#666666;margin-left: 18px;}.el-tabs__item:hover{color: #3299ff;}.el-tabs__item.is-active {background-color: #0387fd;color:white;border:none}}.el-tabs__nav-prev,.el-tabs__nav-next {.el-icon-arrow-left,.el-icon-arrow-right {font-size: 20px;color:#0387fd;line-height: 58px;font-weight: 600;}}}.el-tabs__content {flex: 1;padding: 0;display: flex;overflow: hidden;flex-direction: column;border-top: 11px solid #f0f2f5;.el-tab-pane {flex: 1;padding: 0;display: flex;overflow: hidden;flex-direction: column;}}}}