elementui可展開表格多層嵌套，expand-change中使用異步方法Dom不更新。需要點擊兩次。

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換個名字試試，可能就解決了。^_