elementUi——table 设置列为fixed后，页面切换时导致错位问题(亲测有效)

谁践踏了优雅 2022-10-09 12:14 746阅读 0赞

今天测试给我提了一个布局问题：效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
他的测试方式比较奇葩，是不停的切换上面的标签页，然后就出现了上图的错位问题。

百度后发现也有其他人提到这个错位问题：

不过他们的错误基本是表格数据改变时，表格错位。

所以解决办法是：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
思路就是：`watch`监听表格数据的变化，如果变化，则重新渲染表格。

watch: { 
        tableData(val) { 
            this.doLayout();
        }
    },
    methods:{ 
    	doLayout() { 
            this.$nextTick(() => { 
                this.$refs.table.doLayout()
            })
        }
    }

很显然，我现在的情况并非如此，既然网上都说是因为添加了`fixed`导致的表格错位  
![\*\*加粗样式\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
我直接简单粗暴的把`fixed`去掉就可以了。。。

事实证明，确实可以了。但是`fixed`存在的意义在于，当表格横向内容比较多时，可以将操作按钮固定，方便人为操作。所以去掉`fixed`的方法并不是很人性化。

最后经过一系列排查和非人类的试探后，总结如下：

1.  操作一列中，fixed=“right”,需要指定宽度 width
2.  与操作列相邻的一列不加width，其他的列指定宽度

如下图所示：表格中的所有列都加上width，与操作列相邻的一列不要加。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
最终效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/befb71f3e3f6416fad7349b8e8a5e206.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/c68b844c8ba04b739ce375609af10d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/579fe6a82add4647a624ec6f81080212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/dc688cc87dff4808987a4f644c403fc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221005/18f383a11b1f4d36bac76648e0151897.png