首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决 el-table 组件 expand 嵌套 el-table 会渲染两次

解决 el-table 组件 expand 嵌套 el-table 会渲染两次

作者头像
WahFung
发布2020-12-28 11:51:56
3.2K0
发布2020-12-28 11:51:56
举报
文章被收录于专栏:前端技术分享前端技术分享

解决思路:我们没有办法阻止组件渲染,那么只能够等组件渲染之后,查询dom,删除多余的table

代码(这里只展示主要代码):

<el-table>
  <el-table-column type="expand" fixed>
    <el-table
    class="table-item"
    @hook:mounted="tableMounted">
    </el-table>
  </el-table-column>
</el-table>
export default {
  methods: {
    tableMounted () {
      let dom = this.$el.querySelectorAll('.table-item')
      if (dom.length === 2) {
        dom[1].remove()
      }
    }
  }
}

@hook:mounted 监听组件 mounted 事件

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决思路:我们没有办法阻止组件渲染,那么只能够等组件渲染之后,查询dom,删除多余的table
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档