关于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;  // 鼠标挪动到表头时候鼠标款式，默认小手
  }