vue 手风琴组件_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就闭