解决el-tabs下滑线与上方文字不对齐问题

智慧小仙女

已于 2024-11-01 10:19:04 修改

阅读量402

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-11-01 10:18:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42987138/article/details/143424782

版权

遇到的问题：

el-tabs的底部下划线会跟着el-tabs上方数量宽度而变化，就会出现不对齐情况

解决方法：

给el-tabs外层包个div,el-tabs给个loading，loading就是列表的数据
实现代码：

 <div style="min-width:470px;">
   <el-tabs v-model="searchForm.listType" @tab-click="changeClueTab('WAIT_GET')" v-if="!loading">
    <el-tab-pane
      v-for="item in tabList"
       :key="item.value"
       :label="`${item.label} (${item.number})`"
       :name="item.value"
     ></el-tab-pane>
    </el-tabs>
</div>