使用el-tab，el-tab-pane循環使用循環后不顯示下劃線問題

在vue項目中使用element-UI el-tab里的el-tab-pane是循環出來的，但是循環出來后選中tab不顯示下劃線了

文章目錄

問題
- 問題展示效果
- 問題代碼
- 問題原因
解決方案
- 解決后效果
- 解決方案1代碼
解決方案2代碼

問題

問題展示效果

在這里插入圖片描述

問題代碼

        <el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id ">{{ item.name }}</el-tab-pane></el-tabs>

問題原因

在這里插入圖片描述
el-tabs__active-bar is-top 元素寬度為0

解決方案

解決后效果

在這里插入圖片描述

解決方案1代碼

在方法里設置固定寬度

 _this.$nextTick(_ => {const activeBarElement = document.getElementsByClassName('el-tabs__active-bar')[0]activeBarElement.style.width = '104px';})

解決方案2代碼

給name添加一個空字符串

        <el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane v-for="item in model_creation_list" :label="item.abbreviation" :name="item.id + ''">{{ item.name }}</el-tab-pane></el-tabs>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/19915.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/19915.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/19915.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！