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换个名字试试,可能就解决了。_