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字样, 果然被我找到了 - toggleRowExpans

vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果相关推荐

element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
element ui table组件异步加载数据盒子位移
使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的. 这个时候只需要使用element ...
Element ui table组件滚动条隐藏与样式修改
Element ui 虽然用起来方便,但是调整就比较麻烦了,尤其是这个table组件,一旦设定了height属性,数据多的时候就会自动出现滚动条,如果你改了其他的样式,这个滚动条就是十分难看,可以用下 ...
Element UI Table组件固定列底部有一条白线的解决方案
bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除(之前项目都是亮色系所以没发现问题) 通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素 ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
Vue UI组件库以及 Element UI 使用
Vue UI组件库以及 Element UI 使用 1. Vue UI 组件库 1.1 移动端常用 UI 组件库 1.2 PC 端常用 UI 组件库 2. Element UI 2.1 安装 2.2 ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...

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

vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果相关推荐

最新文章

热门文章