elementUi tabs刷新后，选中的tab下划线不显示

问题描述：

选中的tab页，刷新后，cilentWidth为0，下划线不显示。点击其他tab页后正常显示。

 //通过动态设置选中的tab宽度、tranform值使下划线选中resetTabActivePosition($el) {setTimeout(() => {const activeEl = $el.querySelector('.el-tabs__item.is-active');const lineEl = $el.querySelector('.el-tabs__active-bar');const style = getComputedStyle(activeEl);const pl = style.paddingLeft.match(/\d+/)[0] * 1;const pr = style.paddingRight.match(/\d+/)[0] * 1;const w = style.width.match(/\d+/)[0] * 1;lineEl.style.transform = 'translateX(' + (activeEl.offsetLeft + pl) + 'px)';lineEl.style.width = w - pl - pr + 'px';console.log(  lineEl.style.width ,'  lineEl.style.width ')},500);}

解决方法：

<template><div><el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs"><el-tab-panev-for="item in tabOptions":key="item.name":label="`${item.label}(${numData[item.name]})`":name="item.name"></el-tab-pane></el-tabs></div>
</template><script>
export default {name: 'Tab',props: ['tabOptions', 'numData', 'isLoadingTab'],data() {return {activeName: ''};},created() {this.activeName = this.$route.query.tabName || this.tabOptions[0].name;},mounted() {},methods: {handleClick(event) {let query = this.$route.query;this.$router.push({query: {...query,tabName: this.activeName}});},//通过动态设置选中的tab宽度、tranform值使下划线选中resetTabActivePosition($el) {setTimeout(() => {const activeEl = $el.querySelector('.el-tabs__item.is-active');const lineEl = $el.querySelector('.el-tabs__active-bar');const style = getComputedStyle(activeEl);const pl = style.paddingLeft.match(/\d+/)[0] * 1;const pr = style.paddingRight.match(/\d+/)[0] * 1;const w = style.width.match(/\d+/)[0] * 1;lineEl.style.transform = 'translateX(' + (activeEl.offsetLeft + pl) + 'px)';lineEl.style.width = w - pl - pr + 'px';console.log(  lineEl.style.width ,'  lineEl.style.width ')},500);}},watch: {activeName: {handler: function (newVal, oldVal) {//别忘了在给tab设置refs = 'tabs';this.resetTabActivePosition(this.$refs.tabs.$el);if (newVal !== oldVal) {this.$emit('getTableListHandler', newVal);}}}}
};
</script><style lang="scss" scoped>
</style>

elementUi tabs刷新后，选中的tab下划线不显示相关推荐

element-ui tabs标签嵌套使用时基础下划线不显示的问题
前几天写到 tabs标签嵌套使用的时候,嵌套的tabs 下划线无法显示,记录下解决办法在内层tabs 上添加v-if ="外层tabs的activeName",意思为当选中这个 ...
element中的横线,element的tab，下划线不显示的问题
页面重新加载,tabs选中tab的下划线不显示,如图所示: 和点击后的效果,如下,是不一样的 computed: { barStyle: { get: function get() { var _th ...
element tabs 的基础类型下划线不显示
tabs 的基础类型用在多层嵌套里面导致下划线不显示,排除出style的width为0没有赋值到: 解决方法是用v-if来重新加载.
word文档下划线无法显示的解决方法
在编辑文档的时候经常会遇到下划线无法显示的情况,如图: 如果遇到不能在姓名后面加下划线的情况,我们该怎么做? 请看下面的图解: 1.首先点击左上角的office图标 2.点击右下角"word ...
Windows系统中Word文档中文字后面的空格下的下划线不显示的解决办法
笔者最近在做课程设计,需要写Word文档,在写文档的时候遇到了一堆bug,现在课程设计肝完了,终于有时间梳理梳理这些bug然后发布出来做个备忘录. 第一个bug是Windows系统中Wor ...
word 2021 空格处下划线不显示
word 2021 空格处下划线不显示问题解决办法问题尾部空格不显示下划线解决办法空格处下划线就显示出来了
WPF Label或者其他控件（以Content显示内容的）单个下划线不显示的问题。
在项目中遇到,用户输入内容里面含有下划线,显示不正确的问题.一开始我想着用"@"符号转义,结果没有成功. 在网上搜了好久,大家的解决方法都是使用 Replace("_&q ...
MATLAB中下划线的显示问题
在画图时,有时候x轴的某一类别包含下划线,比如"a_a", 但在显示的时候下划线是显示不出来的,这时候就需要在下划线前加一个转义符'\'. 通常可以这么处理: x = strrep ...
android自定义tab下划线变大,Android开发之设置TabLayout下方下划线的宽度
由于最近项目需要,需要设置tabLayout下方下划线的长度.笔者上网找了半天,也没有找到方法.后来了解到在源码中对tabLayout的下划线进行了设置.并没有方法可以直接设置. 然后,笔者看到了某位 ...

elementUi tabs刷新后，选中的tab下划线不显示

问题描述：

解决方法：

elementUi tabs刷新后，选中的tab下划线不显示相关推荐

最新文章

热门文章