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

通过自定义指令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);

  },

});