分享

el-table 内容高度变化,固定列高度问题

 化茧成蝶时光机 2022-06-14 发布于上海

问题描述:在table的行中使用折叠面板,同时table的column使用了fixed,折叠面板展开时fixed行高并没有自适应

在这里插入图片描述在这里插入图片描述

解决思路:万事先百度,https://github.com/ElemeFE/element/issues/12078,在issues上找到类似情况的,不过有点区别就是我使用折叠面板,高度变化有个过程,于是自己动手改了一下,如果有更好方案请留言赐教!!!
思路是利用折叠面板change方法,获取改行高度,动态修改fixed行的高度(折叠面板展开有个过程,期间height动态变化所以使用定时器)

在这里插入图片描述

changeCollapse (index) {
      const leftEls = this.$refs['dataTable'].$el.querySelectorAll('.el-table__fixed .el-table__fixed-body-wrapper tbody tr')[index]
      const rightEls = this.$refs['dataTable'].$el.querySelectorAll('.el-table__fixed-right .el-table__fixed-body-wrapper tbody tr')[index]
      const targetRow = this.$refs['dataTable'].$el.querySelectorAll('.el-table__body-wrapper tbody tr')[index]

      let setFixedRowHeight = setInterval(() => {
        const height = targetRow.getBoundingClientRect().height
        if (leftEls) {
          leftEls.style.height = `${height}px`
        }
        if (rightEls) {
          rightEls.style.height = `${height}px`
        }
      }, 10)
      setTimeout(() => {
        if (setFixedRowHeight) {
          clearInterval(setFixedRowHeight)
        }
      }, 1000)
    }

原文地址:https://blog.csdn.net/qq_41890576/article/details/121082506

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约