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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章