解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用出现错位的问题

最新推荐文章于 2025-05-23 18:29:57 发布

搬砖的前端

最新推荐文章于 2025-05-23 18:29:57 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue技术栈及全家桶文章标签： vue.js javascript 前端

互帮互助，点赞收藏。一起成长，欢迎互动。

本文链接：https://blog.youkuaiyun.com/weixin_44461275/article/details/129121220

vue技术栈及全家桶专栏收录该内容

17 篇文章

订阅专栏

针对AntDesignVue的table组件在使用fixed列和expandedRowRender时出现的错位问题，提供了一个解决方案：在渲染后通过调整展开行的高度来避免错位。此方法需要在展开、选中、初始化等操作后重新计算高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用出现错位的问题

方法：

//  解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用 出现错位的问题
    render() {
      this.$nextTick(() => {
        setTimeout(() => {
            let element = document.querySelectorAll(".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";
            }
        }, 100)
      })
    },