在使用element-ui的el-tab-pane做标签页时,label属性的位置与样式不能通过style样式直接解决
使用插槽solt可以实现调整label的文字样式
修改前:
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="推荐岗位" name="0">
</el-tab-pane>
<el-tab-pane label="全部岗位" name="1">
</el-tab-pane>
</el-tabs>
1
2
3
4
5
6
2
3
4
5
6
效果:
修改后:
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="推荐岗位" name="0">
<span slot="label" style="font-size:16px;">
<i class="el-icon-s-grid" style="margin:0 10px 0 10px">
<span style="padding-left: 8px;font-weight:bold;">推荐岗位</span>
</i>
</span>
</el-tab-pane>
<el-tab-pane label="全部岗位" name="1">
<span slot="label" style="font-size:16px;">
<i class="el-icon-s-order" style="margin:0 10px 0 10px">
<span style="padding-left: 8px;font-weight:bold;">全部岗位</span>
</i>
</span>
</el-tab-pane>
</el-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果: