Vue 使用Element-ui table组件实现手风琴效果

利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开

效果展示

手风琴效果

版本说明

"vue": "^2.6.11",
"element-ui": "^2.13.0"

实现思路

准备工作

mock了两个静态数据: classList 和 studentMap , 分别表示班级列表, 班级-学生列表映射关系.
在表格中注入 @expand-change展开事件的处理函数handleExpandChange, 该事件触发会默认传入两个参数: row, expandedRows, 第一个参数是当前触发展开事件的行数据, 第二个参数是当前表格中处于展开状态的全部行数据.
点击班级的行展开的时候, 我们可以通过回调参数row中的班级id标记currentClassId, 这样就可以找到对应studentMap中该班级的学生列表, 渲染班级学生表并展开.

思路分析

首先看官方文档并没有提供表格手风琴相关的配置参数, OK, 那说明既然各种修改数据似乎都不行, 那么我想这个展开和收起一定是有触发的事件, 这么一思考, 我想到Vue的$refs属性获取到所有已声明注册过 ref 的所有的子组件, 那么我试试看是否可以拿到表格的实例, 来看看是否有相应的事件.
在handleExpandChange中定义一个table组件引用const $classTable = this.$refs.classTable, debug一下, 果然能拿到实例:

table组件实例
点开实例, 直接看方法, 关注expand字样, 果然被我找到了 - toggleRowExpansion, 该方法支持两个参数, 第一个是row: 行数据, 第二个是boolean值, 如果true就展开, false就闭合, 那么直觉上就大有可为. toggleRowExpansion

实现代码

<template>
  <el-table ref="classTable" :data="classList" style="width: 100%" @expand-change="handleExpandChange">
    <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>
    <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: {},
      getRowKey(row) {
        console.log(row.id)
        return row.id
      }
    }
  },
  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
          }
        ]
      }
    },
    handleExpandChange(row, expandRows) {
      const $classTable = this.$refs.classTable
      if (expandRows.length > 1) {
        expandRows.forEach(expandRow => {
          if (row.id !== expandRow.id) {
            $classTable.toggleRowExpansion(expandRow, false)
          }
        })
      }
      this.currentClassId = row.id
    }
  }
}
</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>