ElementUi可展开表格多层嵌套，expand-change中使用异步方法后dom不生效。再次点击才正常展示数据。

一、 问题描述

项目中需要用到表格打开继续展开表格，点击expand打开时，请求下层数据，然后再将数据渲染到页面上，根据elementui的文档，我这边使用了el-table 的expand属性，@expand-change中请求下层数据。遇到了问题，异步请求获取到下层数据后，console.log查看数据已经存在了，但是el-table的下层表格并没有渲染出来，再次点击打开按钮页面才渲染出来下层表格。
代码基本如下：

 <el-table  :data="tableData2"    style="width: 100%" @expand-change="expandData">  
    <el-table-column type="expand" >
      <template slot-scope="props">
        <el-table :data="props.row.children"  @expand-change="expandData"   style="width: 100%">
           <el-table-column :type="props.row.children?'expand':''"    prop="name"  label="商品名称" width="100%">
             <template slot-scope="subProps">
               <el-table :data="subProps.row.children">
                 <el-table-column :type="props.row.children?'expand':''"   prop="name"  label="商品名称" width="100%">
                 </el-table-column>
                 <el-table-column
                label="商品 类型"
                prop="cate">
                </el-table-column>
                <el-table-column
                label="商店地址"
                prop="address">
                </el-table-column>
                <el-table-column
                label="商品描述"
                prop="desc">
                </el-table-column>
               </el-table>
             </template>
           </el-table-column>
           <el-table-column
          label="商品类型"
          prop="cate">
          </el-table-column>
          <el-table-column
          label="商店地址"
          prop="address">
          </el-table-column>
          <el-table-column
          label="商品描述"
          prop="desc">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
  </el-table>

expandData中使用了promise异步请求了数据，页面不渲染，换为同步代码后或者settimeout加同步代码都可以正常渲染了，后续增加了 :row-key="item.id"后，异步请求可以再第一次点击正常渲染，但是这样会出现另一个问题，row-key 本身也带着展开符，闭合时会出现两个展开符，像下图这样。
在这里插入图片描述

二、解决方法

1. 使用 :row-key 使得异步请求生效。
2. 使用css去除列表中第二列的展开闭合符号

我是使用的css如下：

这样就解决了这个问题，但是其实我还是不明白为啥不能在 @expand-change中使用异步请求，有人说是可以把展开的表格抽离出一个单独的组件，数据请求完成后再来渲染显示下层表格，这样对于两层嵌套可能可以实现，我这边的需要展示5层数据，这样还是解决不了，所以就只能修修补补了。=_=

ps： 这里还有个神奇的事儿 。子表格计算当前行的index 会把子表格展开项的行数计算进去，导致我们看到的参数中传递的行数和肉眼看到的行数不同，这时候 见证奇迹的时刻到了，把子属性children换个名字试试，可能就解决了。^_