2024-11-15 Element-ui的tab切换中table自适应宽度无法立即100%的问题

前言

今天在写一个统计图表的时候，将所有的table表格和echarts图表放到一个页面中，这样会在纵向上出现滚动条，上下滑动对用户体验不好，于是改成tab切换的形式

遇到的问题

正如标题所述，elementui在tab中使用table时，会出现bug,宽度的变化时从窄到宽，有一个过渡的过程，而不是直接和父元素的百分百宽度一致

我的想法

• 从左到右渲染，显得很别扭，如果是执行一种以从中间到两边扩展的动画也能提升体验，于是我找了一些资料，需要自定义实现，很繁琐，放弃这种想法；还是解决该问题
  主要问题形如以下代码

<el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="Config">
            <my-table1/>
        </el-tab-pane>
        <el-tab-pane label="Role">
            <my-table2/>
        </el-tab-pane>
        <el-tab-pane label="Task">
            <my-table3/>
        </el-tab-pane>
    </el-tabs>

我在网上搜，看有没有遇到过同样问题的小伙伴，还真有，我从TA的问题下寻找答案，找到了参考答案

该图片来源，参考链接 https://segmentfault.com/q/1010000044993023
看了参考答案，首先我想到，是不是执行机制的导致的问题，如果是执行机制，就要解决代码的执行顺序问题，用v-show，在点击tab的时候让tab延迟出现

handleClick(tab){
    this.$nextTick = (()=>{
        setTimeout(()=>{
            this.isTable = true
        },200)
    })
}

并没有解决，换v-if，用v-if 能暂时规避这个问题，但是会影响后续操作，我在获取到数据后要默认以某一列数的倒序排列，v-if的话没有table节点该功能无法实现，放弃这种解决办法。

最终解决

查看文档使用element U i的table的doLayout方法，对table进行重新布局

this.$refs.myTable.doLayout()

测试了element Plus不存在这个问题，实现方式很简单，重要的时解决问题的过程