使用antd，当表格使用scroll，又需要进行表格嵌套子组件展开时，出现表格内容错乱的解决办法

最近在开发过程中，遇见产品新需求，即在表格中嵌套子组件，可以展开观看额外信息。但是在使用antd开发时，却发现有错乱的现象。并非代码问题，而是组件自带的情况。

解决办法:

计算需要展开的高度，并赋值给绿色区域。 代码如下：

<a-table
        {...{
          props,
          scopedSlots: {
            ...this.$scopedSlots,
          },
        }}
        onChange={this.loadData}
        onExpand={(expanded, record) => {
          console.log(expanded, record)
          this.$nextTick(() => {
            setTimeout(() => {
              // 获取当前展开的额外行
              const elements = document.querySelectorAll(
                `[data-row-key='${record.id}-extra-row']`
              )
              console.log(element)
              // 计算需要展开高度，并将绿色区域高度撑起
              // 33 是td 的 padding 值 加 border值
              const height = elements[0].getBoundingClientRect().height - 33
              elements[2].childNodes[0].innerHTML = `<div style="height: ${height}px;"></div>`
            }, 0)
          })
        }}
      >
        {Object.keys(this.$slots).map((name) => (
          <template slot={name}>{this.$slots[name]}</template>
        ))}
      </a-table>

以上就是本次所有内容。