el-table中设置fixed固定列之后错位的奇葩原因

约定不等于承诺〃 2023-10-11 17:08 14阅读 0赞

## 场景 ##

ElementUI中el-table设置指定列固定不动,不受滚动条影响：

[ElementUI中el-table设置指定列固定不动,不受滚动条影响\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_el-table固定列][ElementUI_el-table_BADAO_LIUMANG_QIZHI_-CSDN_el-table]

给el-table设置fixed属性之后就可以使该列固定不动。

但是出现了错位的情况，每一行不对应。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、按照网上的解决方案以及官方文档的说明

table在数据请求后，渲染异常的问题，解决办法就是让table重新布局。

官方提供了doLayout方法。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

按照这个方法在请求得到数据的时候，用nextTick对table的DOM重新渲染。

this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
    
            // el-table加ref="multipleTable"
          });

试了下不生效，说明是别的问题。

2、 查看了表格中的最后一列

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_12_color_FFFFFF_t_70_g_se_x_16][]

发现该列的宽度设置的较低，内存已经越出，导致每行错位。将该列的宽度调宽。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_9_color_FFFFFF_t_70_g_se_x_16][]

恢复正常。

[ElementUI_el-table_BADAO_LIUMANG_QIZHI_-CSDN_el-table]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108141038
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/833be14985bb4f3780db5ea474722dec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_19,color_FFFFFF,t_70,g_se,x_16
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0eb1b803438a41749991af688d1b3c01.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1fbe5433070c4d3abd431dd36d3ea917.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ece46a344fa84322b3df1ac8ba224df6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_9,color_FFFFFF,t_70,g_se,x_16