目录

el-tabs 选中状态下划线不显示问题

2021年04月15日约 285 字预计阅读 1 分钟次阅读

目录

问题描述

每个 tabName 是唯一的，后端没有提供我唯一的id，错误用法如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<el-tabs v-model="activeName">
    <el-tab-pane 
        v-for="(item,tabIndex) in totalTabs"
        :key="tabIndex"
        :name="tabIndex"
        :label="item.tabName"
    >
    </el-tab-pane>
</el-tabs>

导致的问题，默认第一个 tabName 选中状态，对应的 active-bar width:138px; translate(0), 点击其他 tabName ,对应的 active-bar width:0px; translate(158),下划线不显示

解决方法：name不能为`index`

若后端提供有每个 tabName 对应的唯一id，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<el-tabs v-model="activeName">
    <el-tab-pane 
        v-for="item in totalTabs"
        :key="item.id"
        :name="item.id"
        :label="item.tabName"
    >
    </el-tab-pane>
</el-tabs>

在 data 初始化数据中定义 activeNAme:"0",默认选择第一个 tabName 。 2. 若后端没有提供唯一ID ，但 tabName 是唯一的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<el-tabs v-model="activeName">
    <el-tab-pane 
        v-for="item in totalTabs"
        :key="item.id"
        :name="item.tabName"
        :label="item.tabName"
    >
    </el-tab-pane>
</el-tabs>

在 data 初始化数据中定义 activeName:"", 在 methods 初始化查询方法中，对 activeName 赋值一个默认值 this.activeName = totalTabs[0].tabName 。