ant-design table添加fixed属性，样式错位

珂珂胖

于 2024-09-11 15:13:35 发布

阅读量174

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_39048904/article/details/142140827

版权

左右都添加了fixed固定样式，则两头都错位，初步解决，在加载数据的时候调用这个函数即可

setFixedHeight() {
      //解决左右两边fixed固定的表格行高不一致
      this.$nextTick(()=>{
        //table的id
        let tableId = 'dateImportTable';

        const scrollHeadDiv = document.querySelector(`#${tableId} .ant-table-scroll > .ant-table-hide-scrollbar`);
        const scrollBodyDiv = document.querySelector(`#${tableId} .ant-table-scroll > .ant-table-body`);
        const leftFixedDiv = document.querySelector(`#${tableId} .ant-table-fixed-left .ant-table-header`);
        const leftFixedBodyDiv = document.querySelector(`#${tableId} .ant-table-fixed-left .ant-table-body-inner`);
        const rightFixedDiv = document.querySelector(`#${tableId} .ant-table-fixed-right .ant-table-header`);
        const rightFixedBodyDiv = document.querySelector(`#${tableId} .ant-table-fixed-right .ant-table-body-inner`);

        //表头thead的tr高度
        const cssHeaderSelector = 'table.ant-table-fixed thead';
        const scrollHeaderTr = scrollHeadDiv.querySelector(cssHeaderSelector);
        const leftFixedHeaderTr = leftFixedDiv.querySelector(cssHeaderSelector);
        const rightFixedHeaderTr = rightFixedDiv.querySelector(cssHeaderSelector);
        const theoryHeaderTrHeight = window.getComputedStyle(scrollHeaderTr).height;
        leftFixedHeaderTr.style.height = theoryHeaderTrHeight;
        rightFixedHeaderTr.style.height = theoryHeaderTrHeight;



        //表体tbody的tr高度，循环对每一行进行调整
        setTimeout(()=>{
          console.log('records',this.records)
          this.records.forEach((item)=>{
            console.log('item',item)
            //每一行的rowKey值，也就是<a-table>设置的rowKey
            let rowKey = item.waybillNumber;
            const cssSelector = `table.ant-table-fixed tr[data-row-key='${rowKey}']`;
            const rightFixedTr = rightFixedBodyDiv.querySelector(cssSelector);
            console.log('rightFixedTr',rightFixedTr)
            const leftFixedTr = leftFixedBodyDiv.querySelector(cssSelector);
            console.log('leftFixedTr',leftFixedTr)

            const scrollTr = scrollBodyDiv.querySelector(cssSelector);
            const theoryTrHeight = window.getComputedStyle(scrollTr).height;
            console.log('theoryTrHeight',theoryTrHeight)

            leftFixedTr.style.height = theoryTrHeight;
            rightFixedTr.style.height = theoryTrHeight;
          })

        }, 1000)
      })
    },