el-table fixed固定列导致错位的解决方法介绍
更新时间：2022年11月12日 09:46:16 作者：NMGWAP
ElementUI中el-table设置指定列固定不动,不受滚动条影响,下面这篇文章主要给大家介绍了关于el-table fixed固定列导致错位的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案
1.doLayout（官方提供）
对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。
2.<el-table>标签上加一个class="table-fixed"
这个通过设置优先级覆盖内联样式
3.el-table-column增加width
这个是网上一个大神经过一系列排查和非人类的试探后，总结出来。
操作一列中，fixed=“right”,需要指定宽度 width
与操作列相邻的一列不加width，其他的列指定宽度
我在项目上测试确实是这个问题。但是我的项目是动态表头的，没办法确定fixed列的相邻列。因此我用了一种取巧的方案，就是用doLayout方案，可以解决横向滚动的不对齐的问题，但是还有个问题就是如果列比较少（每个列都有宽度），表格不撑满整个页面。
4.我的实现方案
1.doLayout +width
2.设置最小宽度解决不撑满问题
最终解决问题。
总结
到此这篇关于el-table fixed固定列导致错位的解决方法的文章就介绍到这了,更多相关el-table fixed固定列导致错位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解使用vue-cli脚手架初始化Vue项目下的项目结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue3中路由传参query、params及动态路由传参详解
vue3中的传参方式和vue2中一样,都可以用query和params传参,下面这篇文章主要给大家介绍了关于vue3中路由传参query、params及动态路由传参的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue.js模版插值的原理与实现方法,结合实例形式简单分析了vue.js模板插值的基本功能、原理、实现方法与注意事项,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue实现电梯样式锚点导航效果流程，这种导航效果广泛应用于商城点餐购物情景，文中通过示例代码介绍的很详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-05-05
这篇文章主要介绍了Vue中错误图片的处理的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue部署到线上为啥会出现404的原因分析及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于Vue单页面骨架屏实践的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue button的@click方法无效钩子函数没有执行问题
这篇文章主要介绍了vue button的@click方法无效钩子函数没有执行问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论