目录
需求:
修改方式:
原始代码:
修改代码:
具体步骤:
需求:
修改el-tab标签页的label默认样式(如图所示,该label标签的字体较小,以至于在页面上不太明显,我想修改他的样式)
图示:
修改方式:
原始代码:
<el-tab-pane label="全部" name="first"> </el-tab-pane> <el-tab-pane label="计算机科学" name="second"> </el-tab-pane> <el-tab-pane label="土木工程" name="third"> </el-tab-pane>
修改代码:
<el-tab-pane name="first"> <template #label> <div style="font-weight: 600; color: rgb(95, 91, 91);"> 全部 </div> </template> </el-tab-pane> <el-tab-pane name="second"> <template #label> <div style="font-weight: 600; color: rgb(95, 91, 91);"> 计算机科学 </div> </template> </el-tab-pane> <el-tab-pane name="third"> <template #label> <div style="font-weight: 600; color: rgb(95, 91, 91);"> 土木工程 </div> </template> </el-tab-pane>
具体步骤:
- 使用插槽:#label
- 必须用template标签放置label
- 但是在template使用css样式并不会起效
- 所以在template中加入div标签
- 在div标签中使用css样式