都知道ant-design-vue固定列的时候,如果展开子表,固定列会出现错位问题,查了资料,都说是给每个column加上固定宽度就可以解决,但是当我们有需求不能给固定宽度的时候怎么解决呢?
经过研究发现,错位问题其实就是固定列的这个空列的宽度没有跟子表内容高度保持一致,为此,我们只需更新空列高度与子内容高度一致即可。
在展开子表的回调函数(expand)里面添加重新计算的代码
this.$nextTick(() => {
let element = document.querySelectorAll(
".tableclassname .ant-table-expanded-row"
);
let len = element.length / 2;
for (let i = 0; i < len; i++) {
element[i + len].style.height = element[i].offsetHeight + "px";
}
});
这样就能正确显示了