问题描述：

选中的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-pane
                v-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>