版本:ant design Vue@1.7.8 + Vue@2.6.10
问题:a-table固定列和普通列行高有时一致,有时又不一致的问题
解决思路:可以在每次数据请求完成之后,获取并将普通列的行高赋值给固定列的行高,如下举例是列举给左侧固定列设置行高,右侧固定列道理一样
代码如下:
this.$nextTick(() => {
let tableId = 'fixedTable'
const scrollDiv = document.querySelector('#fixedTable .ant-table-scroll')
const leftFixedDiv = document.querySelector('#fixedTable .ant-table-fixed-left')
const scrollHeaderTr = scrollDiv.querySelector('table .ant-table-thead')
const leftFixedHeaderTr = leftFixedDiv.querySelector('table.ant-table-fixed thead')
const theoryHeaderTrHeight = getComputedStyle(scrollHeaderTr).height
leftFixedHeaderTr.style.height = theoryHeaderTrHeight
```
//循环表格数据,获取普通表格中每一列的行高,并赋值给固定列中对应的那一行,这个操作要在
//固定列每一行本身的高度渲染完成之后,不然新设置的高度会被原本的高度覆盖,所以使用了
//setTimeout函数,固定列的行和普通列的行是根据rowkey来对应的,及row-key相同即为一行。
```javascript
代码如下:
setTimeout(() => {
this.tableData.forEach((item, index) => {
let rowKey = index
const leftFixedTr = leftFixedDiv.querySelector(`.ant-table-body-inner table.ant-table-fixed tr[data-row-key='${rowKey}']`)
const scrollTr = scrollDiv.querySelector(`table .ant-table-tbody tr[data-row-key='${rowKey}']`)
const theoryTrHeight = getComputedStyle(scrollTr).height
leftFixedTr.style.height = theoryTrHeight
})
},10)
})