自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题

问题： el–table组件中，column在设置了fixed属性的情况下下，垂直滚动会出现表格错位的问题。

分析： column在设置了fixed=“left”或fixed=“right”后，在table的对应位置增加了对应个数的column，它们都被设置为position: fixed。下面的table只是被固定的column遮盖，当垂直方向有滚动事件时，两侧固定column会动态计算滚动高度。但是实际使用中计算的时候会受头部样式或padding的影响而计算出错，导致出现表格错位的问题。

解决方式：

        笔者是给table组件添加自定义指令解决的，有兴趣的朋友可以自己封装组件。

   代码如下：

// 解决table组件添加fixed属性滚动时表格错位问题

Vue.directive(‘fixed–scroll‘, {

            inserted: function (el) {

                // 获取tablebody 

                let targetEl = document.querySelector(“.el–table .el–table__body–wrapper“);           

                // 监听滚动事件

                targetEl.addEventListener(“scroll“, setFixedScrollTop);

                function setFixedScrollTop(params) {

                    // table滚动的高度

                    let top = target.scrollTop;

                  //  获取table头部

         let tableHead = document.querySelector(“.el–table .el-table__header–wrapper“);

                  // 头部的高度

                   let height = tableHead.clientHeight；

                    // 左定位盒子

                    let fixedLeft = document.querySelector(“.el-table__fixed .el-table__fixed-body–wrapper“);

                    // 右定位盒子

                    let fixedRight = document.querySelector(“.el-table__fixed-right .el-table__fixed-body–wrapper“);

                    // 向上偏移量

                    let fixedTop = height – top;

                    if (fixedLeft) fixedLeft.style.top = fixedTop + “px“

                    if (fixedRight) fixedLeft.style.top = fixedTop + “px“

                }

            }

    })

代码007普通

打赏 收藏 海报 链接