antd table 渲染未完成离开页面，重新回去表格渲染错误

最新推荐文章于 2025-09-01 23:51:35 发布

原创最新推荐文章于 2025-09-01 23:51:35 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

ant design vue

5 篇文章

订阅专栏

错误在于表格列错列显示，操作列fixed在右侧，表格内列因为文字过多有换行成3行的，导致body列高和操作栏固定列列高不一致了

解决方法可以用

在页面返回activated的时候对body高和操作栏高判断，可重新渲染表格

  activated () {
    // fix: 打开一个页面在表格还没渲染完成时，打开另一个页面，然后返回此页面导致表格操作列高度不对，没有跟随body行的高度，需触发重新渲染
    const fixRightDom = this.$el.querySelector('.ant-table-fixed-right .ant-table-body-outer')
    const bodyDom = this.$el.querySelector('.ant-table-content .ant-table-body')
    if (fixRightDom && fixRightDom.clientHeight !== bodyDom.clientHeight) {
      this.key = 'antd-table' + (+new Date())
    }
  },