一、问题概述

Ant Design版本：Ant Design Vue2 1.7.8
组件：a-table

问题描述：

整个表格嵌套在a-modal里。表格的列有几个字段fixed固定在左右两侧，出现了左右两边固定列的行高和表格内容区的行高不一致的情况。（没嵌套在a-modal时，没发现该情况）

情况如图：

表头thead和表体tbody内的行高都没对齐。但是点击左侧勾选，或者页面高度改变（F12的时候），表格行高会自行恢复对齐一致。
在这里插入图片描述

二、原理解析

我们所看到的一个Table组件，本质是由三个Table元素组成。表格ant-table-fixed-left被固定在左，表格ant-table-fixed-right固定在右，表格ant-table-scroll位于中间用于滚动。如下所示

在这里插入图片描述

三个表格通过rowKey可以确定同一行。

解决思路：

在表格渲染完成后，获取中间滚动表格ant-table-scroll的行tr的高度，赋值给左右两侧固定表格的tr行高。
表头和表体的行高都要调整。

注意要点：

由于要通过rowKey来确定同一行，所以rowKey属性一定要指定，且唯一。我这里是设置了行数据的id。
一定要在表格渲染完成后，再修改表格高度，否则会出现获取不到中间滚动表格行高的情况。所以这里的代码要写在表格动态获取数据dataSource之后。
每一行的行高不一定一致，所以循环对每一行的行高进行调整。表格分页之后一般也就10条数据，所以循环的性能不会影响太大。
对左右两边固定表格的tr的style.height进行调整后，可能会被组件自身的计算行高的style.height所覆盖。所以用setTimeout，保证我们的行高计算不被覆盖，作为最终的行高结果。

三、代码实现

DOM代码：

<a-table 
	ref="table" 
	id="fixedTable" 
	size="default" 
	:scroll="{x:1500}" bordered 
	:rowKey="record=>record.id" 
	:columns="columns"
	:dataSource="dataSource" 
	:pagination="ipagination" 
	:loading="loading"
	:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
	class="j-table-force-nowrap" 
	@change="handleTableChange">
</a-table>

JS代码：

getAction(url, params).then((res) => {
    
    
	if (res.success) {
    
    
		this.dataSource = res.result.records || res.result;
		this.ipagination.total = res.result.total || 0;
		
	  	//解决左右两边fixed固定的表格行高不一致
	  	let that = this;
	  	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(()=>{
    
    
		      that.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;
		      })
		    }, 10)
	  	})
	}
})

四、修复结果

修复后，表头和表体的行高都对齐了。
在这里插入图片描述

解决Ant Design Vue2表格a-table左右fixed固定列的行高与内容区域的行高不一致

目录