element el-tabs 底部的下划线变细

要去掉el-tabs组件底部的下划线和切换时的下划线，你可以使用以下两种方法： 1. 使用CSS样式覆盖默认样式： ```css .el-tabs__header::after { border-bottom: none; } .el-tabs__item.is-active { border-bottom: none; } ``` 2. 通过设置组件属性来实现： ```html <el-tabs type="border-card" :tab-position="position" :stretch="false" style="border: none"> <el-tab-pane label="tab1"></el-tab-pane> <el-tab-pane label="tab2"></el-tab-pane> <el-tab-pane label="tab3"></el-tab-pane> </el-tabs> ``` 其中，`:stretch="false"` 可以去掉切换时的下划线， `style="border: none"` 可以去掉底部的下划线。

### 问题分析 `el-tabs` 的 `el-tab-pane` 切换时，如果在触发某些事件（如弹出提示框并点击确认），可能会导致选中的标签下划线消失的问题。这通常是因为 Vue 组件的状态未正确更新或者 DOM 渲染出现了异常。 以下是可能的原因以及解决方案： 1. **Vue 数据绑定问题**：`v-model` 可能未能及时同步到组件状态。 2. **DOM 更新延迟**：由于异步操作（如弹窗确认逻辑）可能导致 DOM 更新滞后。 3. **样式冲突**：可能存在其他 CSS 样式覆盖了默认的激活态样式。 --- ### 解决方案 #### 方法一：强制刷新 `key` 值 通过动态改变 `el-tab-pane` 的 `key` 属性来强制重新渲染组件，从而解决下划线消失的问题。 ```vue <template> <el-tabs v-model="activeTab" type="border-card" class="tabs_box"> <el-tab-pane v-for="(item, index) in tabs" :key="'tab-' + item.id + renderKey" :label="item.label" :name="item.name" > {{ item.content }} </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeTab: '1', tabs: [ { id: 1, label: '选项卡1', name: '1', content: '内容1' }, { id: 2, label: '选项卡2', name: '2', content: '内容2' } ], renderKey: 0 // 动态 key 控制变量 }; }, methods: { confirmAction() { this.$confirm('您确定要执行此操作吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 执行业务逻辑... console.log('用户已确认'); // 强制重绘 tab 面板 this.renderKey += 1; }); } } }; </script> ``` 这种方法利用了 Vue 的响应式机制，当 `renderKey` 发生变化时会触发子组件的重新渲染[^1]。 --- #### 方法二：手动触发动画完成回调 Element Plus 提供了一些内置的方法可以用来控制动画效果。可以通过监听 `@tab-click` 或者自定义钩子函数，在动画完成后恢复下划线显示。 ```javascript methods: { handleTabClick(tab) { setTimeout(() => { const underline = document.querySelector('.is-active .el-tabs__active-bar'); if (!underline || !this.activeTab) return; // 如果发现下划线丢失，则尝试重新绘制它 requestAnimationFrame(() => { underline.style.width = `${tab.$el.offsetWidth}px`; underline.style.left = `${tab.$el.offsetLeft}px`; }); }, 300); // 调整时间以匹配实际动画持续时间 } } ``` 注意这里的 `setTimeout` 和 `requestAnimationFrame` 是为了等待动画结束后再调整样式[^2]。 --- #### 方法三：清除缓存数据的影响 如果有使用路由守卫或其他地方设置了缓存清理逻辑，需确保不会误删当前活动 Tab 的必要信息。例如引用中提到的 `keepAliveNameList` 处理方式，应避免不必要的移除操作。 ```javascript if (JSON.stringify(userStore.tabStore.find(it => it.path === to.path)?.query) !== JSON.stringify(to.query)) { userStore.$patch(state => { state.keepAliveNameList = state.keepAliveNameList.filter(name => name !== from.name); }); } else { // 不影响现有缓存 } ``` 这里的关键在于区分是否真的需要销毁之前的实例[^3]。 --- ### 总结 以上三种方法分别针对不同的潜在原因提供了修复策略： - 使用动态 `key` 来实现强制重绘； - 自动检测并修正因动画引发的视觉错误； - 审查全局状态管理部分是否存在干扰行为。 具体采用哪种取决于项目的实际情况和个人偏好。