Resuelva la incoherencia entre la altura de fila de las columnas fijas izquierda y derecha de la tabla del formulario Ant Design Vue2 y la altura de fila del área de contenido

Nota: Esta publicación de blog se refiere al artículo original del blogger "qq_32331073". Debido a las diferentes versiones de antdesign utilizadas, y algunos detalles del blog original no estaban claros al principio, el blog original se complementará después de la realización.
Enlace original: https://blog.csdn.net/qq_32331073/article/details/103978188

1. Resumen del problema

Versión de diseño de hormiga: Ant Design Vue2 1.7.8
Componentes:a-table

Descripción del problema:

Todo el formulario está anidado dentro a-modal. La columna de la tabla tiene varios campos fijos en los lados izquierdo y derecho, y la altura de fila de las columnas fijas en los lados izquierdo y derecho no coincide con la altura de fila del área de contenido de la tabla. (Esta situación no se encontró cuando no estaba anidada en a-modal)

La situación es como se muestra en la figura:

Las alturas de fila en el encabezado del encabezado y el cuerpo del cuerpo no están alineadas. Sin embargo, si hace clic en la marca de verificación a la izquierda, o si cambia la altura de la página (cuando se usa F12), la altura de la fila de la tabla restaurará automáticamente su alineación.

2. Análisis de principios

1. Un componente Table que hemos visto se compone esencialmente de tres elementos Table. La tabla ant-table-fixed-leftestá fijada a la izquierda, la tabla ant-table-fixed-rightestá fijada a la derecha y la tabla ant-table-scrollestá en el medio para desplazarse. Como sigue

2. Tres pases de mesa rowKeypueden identificar la misma fila.
   

Soluciones:

Una vez completada la representación de la tabla, obtenga ant-table-scrollla altura de la fila tr de la tabla de desplazamiento en el medio y asígnela a la altura de la fila de tr de la tabla fija en los lados izquierdo y derecho.
Se ajustan las alturas de las filas del encabezado y del cuerpo.

Puntos a tener en cuenta:

• Dado que rowKeyla misma fila debe determinarse mediante el paso, rowKeyel atributo debe especificarse y ser único. Aquí configuro la identificación de los datos de la fila.
• Asegúrese de modificar la altura de la tabla después de representarla; de lo contrario, no se obtendrá la altura de la fila de la tabla desplazable en el medio. Entonces, el código aquí debe escribirse después de que la tabla obtenga dinámicamente el dataSource de datos.
• La altura de fila de cada fila no es necesariamente la misma, por lo que el ciclo ajusta la altura de fila de cada fila. Después de paginar la tabla, generalmente solo hay 10 piezas de datos, por lo que el rendimiento del bucle no se verá demasiado afectado.
• style.heightDespués de ajustar el tr de las tablas fijas en los lados izquierdo y derecho , puede style.heightsobrescribirse con la altura de fila calculada del propio componente. Por lo tanto, use setTimeout, para asegurarse de que nuestro cálculo de la altura de la fila no se sobrescriba, como el resultado final de la altura de la fila.

3. Implementación del código

código 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>

Código 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)
	  	})
	}
})

4. Resultados de la reparación

Después de la corrección, se alinean las alturas de fila del encabezado y el cuerpo.