Solve the inconsistency between the row height of the left and right fixed fixed columns of the Ant Design Vue2 form a-table and the row height of the content area

Note: This blog post refers to the original article of the blogger "qq_32331073". Due to the different versions of antdesign used, and some details of the original blog were not clear at the beginning, so the original blog will be supplemented after the realization.
Original link: https://blog.csdn.net/qq_32331073/article/details/103978188

1. Problem overview

Ant Design Version: Ant Design Vue2 1.7.8
Components:a-table

Problem Description:

The entire form is nested inside a-modal. The column of the table has several fields fixed on the left and right sides, and the row height of the fixed columns on the left and right sides is inconsistent with the row height of the table content area. (This situation was not found when it was not nested in a-modal)

The situation is as shown in the figure:

The row heights in the header thead and the body tbody are not aligned. However, if you click the check mark on the left, or the page height changes (when F12 is used), the row height of the table will automatically restore its alignment.

2. Principle analysis

1. A Table component we have seen is essentially composed of three Table elements. The table ant-table-fixed-leftis pinned to the left, the table ant-table-fixed-rightis pinned to the right, and the table ant-table-scrollis in the middle for scrolling. As follows

2. Three table passes rowKeycan identify the same row.
   

Solutions:

After the rendering of the table is completed, get ant-table-scrollthe height of the row tr of the scrolling table in the middle, and assign it to the row height of tr of the fixed table on the left and right sides.
Both header and body row heights are adjusted.

Points to note:

• Since rowKeythe same row needs to be determined by passing, rowKeythe attribute must be specified and unique. Here I set the id of the row data.
• Be sure to modify the height of the table after the table is rendered, otherwise the row height of the scrolling table in the middle will not be obtained. So the code here should be written after the table dynamically obtains the data dataSource.
• The row height of each row is not necessarily the same, so the loop adjusts the row height of each row. After the table is paginated, there are generally only 10 pieces of data, so the performance of the loop will not be affected too much.
• style.heightAfter adjusting the tr of the fixed tables on the left and right sides , it may be style.heightoverwritten by the component's own calculated row height. So use setTimeout, to ensure that our row height calculation is not overwritten, as the final row height result.

3. Code implementation

DOM code:

<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 code:

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)
	  	})
	}
})

4. Repair results

After the fix, the row heights of the header and body are aligned.