Element-UI使用篇——el-tab的使用+样式修改集锦

目录

一、功能篇

1.1、手动切换tab

二、样式篇

2.1、修改tab项的样式（包括头与内容）

2.2 修改tab页面内容

2.3 修改tab表头

2.4 修改激活表头样式

2.5 修改鼠标移动到表头时候的样式

---

---

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