element表格合计行样式与滚动条冲突问题

最新推荐文章于 2023-10-07 15:24:45 发布

qq_40522470

最新推荐文章于 2023-10-07 15:24:45 发布

阅读量603

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40522470/article/details/119281322

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了一种应对表格固定列与合计行样式冲突的解决方案。当表格行数从0变为1时，合计行会出现，导致样式问题。作者通过JavaScript动态改变父元素宽度来触发reflow，以此解决样式冲突。这种方法适用于不考虑高性能需求的情况，是一种曲线救国的策略。

摘要由CSDN通过智能技术生成

背景：由于业务需要，一个element的表格既需要表格列的fixed属性，又需要有合计行。业务需要会在页面中新增行，当行数从0变1时，合计行会出现，样式与滚动条冲突，但是按照百度的方法修改样式不能完全满足业务需要。

本人采用的是曲线一点的做法：用js令父元素的宽度变化，触发reflow （需要settimeout执行）对前端性能需求较高的请勿使用，仅做记录参考。

          //需要触发reflow
          var ele = document.getElementById('app')//你的id
          var width = parseInt(ele.style.width)
          width += 0.01
          //异步执行宽度增加的方法触发reflow
          setTimeout(() => {
            ele.style.width = width + "%"
          }, 500);