关于element-ui:ElementUI使用篇eltab的使用样式修改集锦

el-tab是tab切换页面

一、性能篇

1.1、手动切换tab

应用场景：tab1中点按钮，主动切换到tab2中

实现：

searchBtnHandle(){
      this.activeName="tab2的name";   //每个tab有个name属性，能够找到这个tab，activename属性绑 
                                       定了以后处于激活状态的tab
    },

二、款式篇

2.1、批改tab项的款式（包含头与内容）

.el-tabs__item {
    padding: 0 20px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    position: relative;
}

2.2 批改tab页面内容

.el-tabs__content{
    height: calc(100% - 40px);
  }

2.3 批改tab表头

.el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #E4E7ED;
    background-color: gainsboro;  //批改背景色
}

2.4 批改激活表头款式

 .el-tabs__item.is-active {
    color: #FFDEAD;  //批改激活表头字体色彩，默认是蓝色
  }

2.5 批改鼠标挪动到表头时候的款式

 .el-tabs__item:hover {
    color: #FFDEAD;  //批改鼠标挪动到表头时候字体色彩，默认淡蓝色
    cursor: pointer;  //鼠标挪动到表头时候鼠标款式，默认小手
  }