1.今天有个需求 需要使用折叠中嵌套一个表格 且数据是多个 需要循坏嵌套 类似于一个人 折叠下面对应一个表格 效果如下:
2.,样式做出来后发现问题有以下几点:
(1)当有多个折叠行的时候,点击展开页面会渲染报错,原因是展开的时候vxe-table还没确定高度,点击的时候就会报错:经过多番尝试 发现需要给每个table定义唯一的key值且需要用if增加一层判断,如下:
这样点击展开的时候就不会页面渲染出错
(2)第二个问题:由于我的vxe表格中有全选的状态,如果使用v-if 勾选之后折叠再展开会清除勾选状态,我当时是想直接将v-if改成v-show 只做显示隐藏,这样就会保留勾选状态,确实,这样做会保留勾选状态,但是第一次展开的时候还是会页面渲染出错,根本问题还是循坏渲染的时候 展开表格 表格的样式不是固定的 高度还没计算出来直接就展开 导致渲染出错 试了很久 最终找到一个不去使用refTable元素将上次的勾选状态重新勾选一遍 而是使用 <keep-alive></keep-alive>将vxe-table表格包裹起来 保存当时的勾选状态,图片如下: