当修改了el-tabs__item的padding或margin时，可能会出现el-tabs__active-bar错位的情况。通过为el-tabs添加ref，并在点击事件中调用重置方法resetActivePosition来手动调整，可以解决这个问题。该方法会根据当前激活项的el元素调整el-tabs__active-bar的位置。若要使bar宽度与item一致，需避免减少padding和margin。
解决办法
<el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
<el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in listData" :key="index"></el-tab-pane>
</el-tabs>
- 给el-tabs添加ref=“tabs”
- 在handleClick中添加重置方法
handleClick(){
this.resetActivePosition(this
最低0.47元/天 解锁文章
扫一扫
3874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
