antd-vue表格固定列高度问题
1.问题
问题如下:当表格有固定列时,固定列的高度和不固定列的高度不一致

2.原因
原因:antd vue版本低的bug,当不固定的行中有数据的值是多行,会把高度撑开,这时固定列的高度就不同步
3.解决方法
js
adjustTableHeight() {
this.$nextTick(() => {
const table = this.$refs.businessManageTable.$el
// 获取非固定表格
const scrollTheadHeight = table.querySelector('.ant-table-scroll table.ant-table-fixed thead').offsetHeight
// 获取左右固定列的表头
const fixedLeft = table.querySelector('.ant-table-fixed-left table.ant-table-fixed thead')
const fixedRight = table.querySelector('.ant-table-fixed-right table.ant-table-fixed thead')
//
fixedLeft ? (fixedLeft.style.height = `${scrollTheadHeight}px`) : null
fixedRight ? (fixedRight.style.height = `${scrollTheadHeight}px`) : null
// 调整每行tr的高度
const scrollTrs = table.querySelectorAll('.ant-table-scroll table.ant-table-fixed tbody.ant-table-tbody tr')
// 获取左边固定的所有行
const fixedLeftTrs = table.querySelectorAll(
'.ant-table-fixed-left table.ant-table-fixed tbody.ant-table-tbody tr'
)
// 获取右边固定的所有行
const fixedRightTrs = table.querySelectorAll(
'.ant-table-fixed-left table.ant-table-fixed tbody.ant-table-tbody tr'
)
setTimeout(() => {
if (fixedLeftTrs.length > 0) {
fixedLeftTrs.forEach((item, index) => {
item.style.height = `${scrollTrs[index].offsetHeight}px`
})
}
if (fixedRightTrs.length > 0) {
fixedRightTrs.forEach((item, index) => {
item.style.height = `${scrollTrs[index].offsetHeight}px`
})
}
}, 200)
})
},