ant-design-vue table model框上固定列与实际列表高度不一致解决

ant-design-vue model上的table固定列与正常列表高度不一致问题解决

解决思路,根据id获取表格列表行高度,固定列重新根据列表高度进行渲染

<template>
    <a-modal ....>
       <a-table id="fixedTable" ...>
        </a-table>
    </a-modal>
</template>
<script>
  export default{
  methods: {
     fetch(params={}){
          // ...此处省略数据加载方法,数据加载成功后重新渲染列表 调用自定义方法
          // 解决固定列表不一致问题
          this.setFixedHeight() 
      },
setFixedHeight() {
    //解决左右两边fixed固定的表格行高不一致
        this.$nextTick(()=>{
            //table的id
            let tableId = 'fixedTable';
        
            const scrollDiv = document.querySelector(`#${tableId} .ant-table-scroll > .ant-table-body`);
            const leftFixedDiv = document.querySelector(`#${tableId} .ant-table-fixed-left .ant-table-body-inner`);
            const rightFixedDiv = document.querySelector(`#${tableId} .ant-table-fixed-right .ant-table-body-inner`);
        
            //表头thead的tr高度
            const cssHeaderSelector = 'table.ant-table-fixed thead';
            const scrollHeaderTr = scrollDiv.querySelector(cssHeaderSelector);
            // const leftFixedHeaderTr = leftFixedDiv.querySelector(cssHeaderSelector);
            // const rightFixedHeaderTr = rightFixedDiv.querySelector(cssHeaderSelector);           
            const theoryHeaderTrHeight = getComputedStyle(scrollHeaderTr).height;           
            // leftFixedHeaderTr.style.height = theoryHeaderTrHeight;
            // rightFixedHeaderTr.style.height = theoryHeaderTrHeight;      
            //表体tbody的tr高度,循环对每一行进行调整
            setTimeout(()=>{
              this.dataSource.forEach((item)=>{
                //每一行的rowKey值,也就是<a-table>设置的rowKey
                let rowKey = item.id;               
                const cssSelector = `table.ant-table-fixed tr[data-row-key='${rowKey}']`;
                const rightFixedTr = rightFixedDiv.querySelector(cssSelector);
                // const leftFixedTr = leftFixedDiv.querySelector(cssSelector);
                const scrollTr = scrollDiv.querySelector(cssSelector);      
                const theoryTrHeight = getComputedStyle(scrollTr).height;       
                // leftFixedTr.style.height = theoryTrHeight;
                rightFixedTr.style.height = theoryTrHeight;
              })
            }, 50)
        })
}
 }
}
</script>

此处解决参考文档:https://blog.csdn.net/qq_38118138/article/details/130622854

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容