解决Vue 使用Element-ui table数据覆盖污染问题

今天处理了一个需求, 利用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>

实践踩坑

(需要源码直接看下文问题解决 )

本意上我是想通过研究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都是数据驱动, 那么我们修改传入的值, 是否就可以响应式修改了, 但理想很丰满, 现实很骨感, 我试了几个博客的代码, 均无生效, 也许是我的姿势错了?

问题解决

问题其实也很简单, 展开表格中绑定的是同一个数据结构: :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>

效果展示

表格展开