#yyds干货盘点#解决antdesign vue 表格嵌套问题

在使用antdesign vue 做嵌套表格的时候，遇到了一个问题，先看一下代码：

<template>
  <a-table :columns="columns" :data-source="data" @expand="handleExpand" class="components-table-demo-nested">
    <a slot="operation" slot-scope="text">Publish</a>
    <a-table
      slot="expandedRowRender"
      slot-scope="text"
      :columns="innerColumns"
      :data-source="innerData"
      :pagination="false"
    >
      <span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span>
      <span slot="operation" slot-scope="text" class="table-operation">
        <a>Pause</a>
        <a>Stop</a>
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item>
              Action 1
            </a-menu-item>
            <a-menu-item>
              Action 2
            </a-menu-item>
          </a-menu>
          <a> More <a-icon type="down" /> </a>
        </a-dropdown>
      </span>
    </a-table>
  </a-table>
</template>

子表格需要添加​​slot="expandedRowRender"​​才能展开,但是添加了这个属性后，会有一个警告:

warning: [antdv：​​expandedRowRendar and scroll​​  are not compatible. Please use one of them at one time]

表格扩展的方法和表格滚动不兼容，找了很久也没有找到解决方法。

​后来的思路是​​expandedRowRender​​​ 定义成变量，初始值为空，父表格添加@expand="handleExpand"扩展方法，点扩展时，​​expandedRowRender​​进行赋值，这样就解决了初始化时expandedRowRendar 和 scroll 不兼容问题。