今天处理了一个需求, 利用Element-UI提供的表格组件的展开做数据展示, 遇到了展开后的表格数据污染问题, 后展开的表格的内部数据覆盖了所有其他展开的表格数据, 针对该问题的解决方案,在此做了个DEMO记录.
场景
我们需要做个班级展示, 其中主表格(班级信息表)主要展示班级信息, 点击展开后的表格(班级学生表)主要展示班级的学生数据, 根据官方DEMO进行代码编写, 但是很快就发现了问题, 问题的效果如下:
很明显, 在一次性展开多个行的时候, 其余的班级行中的学生表格数据都会被污染成最新展开的学生列表.
版本说明
"vue": "^2.6.11",
"element-ui": "^2.13.0"
代码
mock了两个静态数据: classList 和 studentMap , 分别表示班级列表, 班级-学生列表映射关系.
{{ scope.row.id }}
{{ scope.row.name }}
{{ scope.row.age }}
{{ scope.row.id }}
{{ scope.row.name }}
{{ scope.row.fullName }}
{{ scope.row.teacher }}
实践踩坑
(需要源码直接看下文 问题解决 )
本意上我是想通过研究Element-UI Table的相关配置属性来解决该问题, 测试了网上的expand-row-keys和row-key组合区分具体数据块的方法, 但是没有生效, 暂时不知道问题是什么.
但是额外发现一个问题: 按照官方的说法, 如果在table上设置row-key, 并在data里写一个方法, 回调参数将传入row, 返回row.id即可, 代码如下:
// html :row-key
// script
data() {
return {
currentClassId: '',
classList: [],
studentMap: {},
// 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function
getRowKey(row) {
console.log(row.id)
return row.id
}
}
}
运行控制台的结果出现了重复的id, 暂时没有去分析这个是不是失效的原因.
既然该方法没有短时间处理好, 我思考是否可以通过改变交互来实现目的, 参考了一些博客, 决定实现手风琴的交互, 但是网上很多博客方法都是利用展开时间回调函数handleExpandChange的第二个参数做文章, 大概代码就是:
handleExpandChange(row, expandRows) {
this.currentClassId = row.id
if (expandRows.length > 1) {
expandRows.shift()
}
}
思路基本都是既然Vue都是数据驱动, 那么我们修改传入的值, 是否就可以响应式修改了, 但理想很丰满, 现实很骨感, 我试了几个博客的代码, 均无生效, 也许是我的姿势错了?
问题解决
问题其实也很简单, 展开表格中绑定的是同一个数据结构: :data="studentMap[currentClassId]", 也就是所有的行展开列表都用的是同一个数据源, 再加上Vue的数据驱动模型, 所以只要触发修改:data, 所有依赖该数据的视图都会同步更新, 就造成了文首动图中表格数据污染的情况, 处理方式就是让展开的表格和主表格的行进行绑定:
{{ scope.row.id }}
{{ scope.row.name }}
{{ scope.row.age }}