ant-design-vue tabel x,y都设置滚动后错位的解决方法

vue

通过自定义指令fit-columns来解决

ellipsis设置true

function adjustColumnWidth(table) {

const thead = table.querySelector('thead');

const tbody = table.querySelector('tbody');

const headList = [];

const bodyList = [];

const widthList = [];

thead.querySelectorAll('th').forEach(item => {

headList.push(item.querySelector('span').offsetWidth + 18);

});

tbody

.querySelector('tr')

.querySelectorAll('td')

.forEach((item, index) => {

const bodyWidth = item.offsetWidth;

let width = bodyWidth;

bodyList.push(bodyWidth);

if (bodyWidth < headList[index]) {

width = headList[index];

}

item.style.minWidth = `${width}px`;

thead.querySelectorAll('th')[index].style.minWidth = `${width}px`;

widthList.push(width);

});

}

Vue.directive('fit-columns', {

componentUpdated(el) {

setTimeout(() => {

adjustColumnWidth(el);

}, 200);

});