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