ant-design-vue model上的table固定列與正常列表高度不一致問(wèn)題解決
解決思路，根據(jù)id獲取表格列表行高度，固定列重新根據(jù)列表高度進(jìn)行渲染
<template>
<a-modal ....>
<a-table id="fixedTable" ...>
</a-table>
</a-modal>
</template>
<script>
export default{
methods: {
fetch(params={}){
// ...此處省略數(shù)據(jù)加載方法拍皮，數(shù)據(jù)加載成功后重新渲染列表 調(diào)用自定義方法
// 解決固定列表不一致問(wèn)題
this.setFixedHeight()
},
setFixedHeight() {
//解決左右兩邊f(xié)ixed固定的表格行高不一致
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高度，循環(huán)對(duì)每一行進(jìn)行調(diào)整
setTimeout(()=>{
this.dataSource.forEach((item)=>{
//每一行的rowKey值夕冲，也就是<a-table>設(shè)置的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
