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

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

代码（这里只展示主要代码）：

代码语言：javascript复制

<el-table>
  <el-table-column type="expand" fixed>
    <el-table
    class="table-item"
    @hook:mounted="tableMounted">
    </el-table>
  </el-table-column>
</el-table>

代码语言：javascript复制

export default {
  methods: {
    tableMounted () {
      let dom = this.$el.querySelectorAll('.table-item')
      if (dom.length === 2) {
        dom[1].remove()
      }
    }
  }
}

@hook:mounted 监听组件 mounted 事件

渲染 dom hook table 事件

0 人点赞