今天处理了一个需求, 利用Element-UI提供的表格组件的展开做数据展示, 遇到了展开后的表格数据污染问题, 后展开的表格的内部数据覆盖了所有其他展开的表格数据, 针对该问题的解决方案,在此做了个DEMO记录.
场景
我们需要做个班级展示, 其中主表格(班级信息表)主要展示班级信息, 点击展开后的表格(班级学生表)主要展示班级的学生数据, 根据官方DEMO进行代码编写, 但是很快就发现了问题, 问题的效果如下:
错误效果
很明显, 在一次性展开多个行的时候, 其余的班级行中的学生表格数据都会被污染成最新展开的学生列表.
版本说明
"vue": "^2.6.11",
"element-ui": "^2.13.0"
代码
mock了两个静态数据: classList 和 studentMap , 分别表示班级列表, 班级-学生列表映射关系.
<template>
<el-table :data="classList" style="width: 100%">
<el-table-column type="expand">
<template>
<el-table :data="studentMap[currentClassId]" style="width: 100%">
<el-table-column label="学号" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="学生姓名" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="年龄" align="center">
<template slot-scope="scope">{{ scope.row.age }}</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="班级编号" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="班级简称" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="班级全称">
<template slot-scope="scope">{{ scope.row.fullName }}</template>
</el-table-column>
<el-table-column label="班主任" align="center">
<template slot-scope="scope">{{ scope.row.teacher }}</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'Table',
data() {
return {
currentClassId: '',
classList: [],
studentMap: {}
}
},
created() {
this.fetchClassList()
this.fetchStudentClassMap()
},
methods: {
fetchClassList() {
this.classList = [{
id: 'class-1',
name: '软工1班',
teacher: '于老师',
fullName: '软件工程学院-软件工程-1班'
}, {
id: 'class-2',
name: '计科1班',
teacher: '张老师',
fullName: '软件工程学院-计算机科学技术-1班'
}, {
id: 'class-3',
name: '软工2班',
teacher: '李老师',
fullName: '软件工程学院-软件工程-2班'
}, {
id: 'class-4',
name: '工商1班',
teacher: '钱老师',
fullName: '商学院-工商管理-1班'
}]
},
fetchStudentClassMap() {
this.studentMap = {
'class-1': [
{
id: '20200101',
name: '小范',
age: 18
}, {
id: '20200102',
name: '小王',
age: 19
}, {
id: '20200103',
name: '小李',
age: 19
}
],
'class-2': [
{
id: '20200201',
name: '小左',
age: 18
}, {
id: '20200202',
name: '小夏',
age: 19
}
],
'class-3': [
{
id: '20200301',
name: '小丁',
age: 18
}, {
id: '20200302',
name: '小杨',
age: 19
}
],
'class-4': [
{
id: '20200401',
name: '小许',
age: 18
}
]
}
}
}
}
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
解决问题
问题其实也很简单, 展开表格中绑定的是同一个数据结构: :data="studentMap[currentClassId]", 也就是所有的行展开列表都用的是同一个数据源, 再加上Vue的数据驱动模型, 所以只要触发修改:data, 所有依赖该数据的视图都会同步更新, 就造成了文首动图中表格数据污染的情况, 处理方式就是让展开的表格和主表格的行进行绑定:
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="studentMap[props.row.id]" style="width: 100%">
<el-table-column label="学号" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="学生姓名" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="年龄" align="center">
<template slot-scope="scope">{{ scope.row.age }}</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
效果展示
表格展开
实践踩坑
本意上我是想通过研究Element-UI Table的相关配置属性来解决该问题, 测试了网上的expand-row-keys和row-key组合区分具体数据块的方法, 但是没有生效, 暂时不知道问题是什么.
但是额外发现一个问题: 按照官方的说法, 如果在table上设置row-key, 并在data里写一个方法, 回调参数将传入row, 返回row.id即可, 代码如下:
// html :row-key
<el-table ref="classTable" :data="classList" :row-key="getRowKey" style="width: 100%" @expand-change="handleExpandChange">
</el-table>
// 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, 暂时没有去分析这个是不是失效的原因.
重复的row id
既然该方法没有短时间处理好, 我思考是否可以通过改变交互来实现目的, 参考了一些博客, 决定实现手风琴的交互, 但是网上很多博客方法都是利用展开时间回调函数handleExpandChange的第二个参数做文章, 大概代码就是:
handleExpandChange(row, expandRows) {
this.currentClassId = row.id
if (expandRows.length > 1) {
expandRows.shift()
}
}
思路基本都是既然Vue都是数据驱动, 那么我们修改传入的值, 是否就可以响应式修改了, 但理想很丰满, 现实很骨感, 我试了几个博客的代码, 均无生效, 也许是我的姿势错了?
网友评论