Skip to content

antd-vue表格固定列高度问题

1.问题

问题如下:当表格有固定列时,固定列的高度和不固定列的高度不一致

image-20241210170338640

2.原因

原因:antd vue版本低的bug,当不固定的行中有数据的值是多行,会把高度撑开,这时固定列的高度就不同步

3.解决方法

js
adjustTableHeight() {
    this.$nextTick(() => {
        const table = this.$refs.businessManageTable.$el
        // 获取非固定表格
        const scrollTheadHeight = table.querySelector('.ant-table-scroll table.ant-table-fixed thead').offsetHeight
        // 获取左右固定列的表头
        const fixedLeft = table.querySelector('.ant-table-fixed-left table.ant-table-fixed thead')
        const fixedRight = table.querySelector('.ant-table-fixed-right table.ant-table-fixed thead')
        // 
        fixedLeft ? (fixedLeft.style.height = `${scrollTheadHeight}px`) : null
        fixedRight ? (fixedRight.style.height = `${scrollTheadHeight}px`) : null
        // 调整每行tr的高度
        const scrollTrs = table.querySelectorAll('.ant-table-scroll table.ant-table-fixed tbody.ant-table-tbody tr')
        
        
        // 获取左边固定的所有行
        const fixedLeftTrs = table.querySelectorAll(
            '.ant-table-fixed-left table.ant-table-fixed tbody.ant-table-tbody tr'
        )
        // 获取右边固定的所有行
        const fixedRightTrs = table.querySelectorAll(
            '.ant-table-fixed-left table.ant-table-fixed tbody.ant-table-tbody tr'
        )
        setTimeout(() => {
            if (fixedLeftTrs.length > 0) {
                fixedLeftTrs.forEach((item, index) => {
                    item.style.height = `${scrollTrs[index].offsetHeight}px`
                })
            }

            if (fixedRightTrs.length > 0) {
                fixedRightTrs.forEach((item, index) => {
                    item.style.height = `${scrollTrs[index].offsetHeight}px`
                })
            }
        }, 200)
    })
},

MIT Licensed