elment-ui表格展示数据手风琴效果实现

于 2022-07-18 15:30:02 发布
阅读量850 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645324/article/details/125851115
版权

vue.js 前端

 如图显示效果

只能展开一行，不能同时展开两行，因为数据量较多的情况下,一次性包括子列表的数据查出来不是很现实，所以需要两次查询。

而第二次查询的tableDataDetail中，如果两个数据展开，则最后一次展开的会覆盖前面所有的数据。

为了保证不发生这样的Bug，我们采取手风琴效果，也就是说只能展开一行，另一行则自动藏起来，如上图代码所示。

其中table所需要设置数据为

 最后的效果为：

 

 

玉之之
关注
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
weixin_42300424的博客
12-24 1280
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明"vue": "^2.6.11","element-ui": "^2.13.0"实现思路准备工作mock了两个静态数据: classList 和 studentMap , 分别表示班级列表, 班级-学生列表映射关系.在表格中注入 @expand-change展开事件的处理函数handleExpa...
element-ui手风琴自定义html,使用element-ui table expand展开行实现手风琴效果
weixin_31935149的博客
06-15 1152
写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果。效果前瞻：先删减一下代码：查看详情{{ props.row.name }}export default {data() {return {tableData5: [{id: '1',name: '好滋好味鸡蛋仔1',desc: '荷兰优质淡奶，奶香浓而不腻1',}, {id: '...
使用element-ui table expand展开行实现手风琴效果
10-17
主要介绍了使用element-ui table expand展开行实现手风琴效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element UI表格可展开手风琴效果实现
正一品程序员的博客
11-26 983
链接
Element UI中el-table中的expand展开表格功能，实现手风琴效果（适用低版本elementUI）
weixin_42452567的博客
07-07 2013
//示例代码 <template> <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="expands" @current-change="toggleRowExpansion" > <el-table-column type="expand"> <el-table :data="tableExpandData
Element-ui table组件实现手风琴效果
小星落
02-02 2241
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开 <el-table :data="tableData" style="width: 100%" @expand-change="toggleRowExpansion"> <el-table-column type="expand"> <template slot-scope="props"> <el-table :data="props.row.l
Element-UI组件之数据Data
TwentyOne__的博客
07-03 6629
Element-UI组件之数据DataTable 表格基础表格带斑马纹表格带边框表格带状态表格固定表头固定列固定列和表头流体高度多级表头单选多选排序筛选自定义列模板展开行树形数据与懒加载自定义表头表尾合计行合并行或列自定义索引 Table 表格 基础表格 <template> <el-table :data="tableData" style="...
element-ui table表格组件实现手风琴效果
weixin_33845477的博客
01-22 2436
一、前言 百度上到的实现多多少少有点瑕疵，要么只能实现默认展开，要么不能实现，要 么总会有一行是展开状态，所以自己想办法解决了这个问题。 二、代码 首先，核心代码 三、解释 expand-change事件会监听table expand行发生变化时触发，无论展开还是关闭，这就很烦，他会返回2个默认参数，一个是当前行，二个是当前展开的行的集合数组，所以这里我用第二个参数的长度是否大于1来识别是否有...
element-ui手风琴效果
兰颜的博客
08-11 2157
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开 效果如下 使用版本 "element-ui": "^2.15.3", "vue": "^2.6.11", 实现方法 链接：点击这里 代码 总结 通过简单的配置就可以达到想要的效果 ...
超酷纯CSS3动感手风琴列表ui界面设计
12-13
这是一款使用纯CSS3制作的动感垂直手风琴列表ui界面设计效果。该手风琴特效设计时尚，颜色搭配非常好，每次点击手风琴项时都带有很酷的动画效果。
常用手风琴树形菜单js特效代码
10-08
常用手风琴树形菜单js特效代码
element-ui 树形表格 懒加载 手风琴模式 拖动排序
幽冥雪羽的博客
07-15 3767
手风琴模式 实现的效果： 其中一个节点展开时，其他节点关闭，一直保持最多只有一个节点是展开的。 需要解决的问题： element-ui 树形懒加载表格自带的节点展开时，默认只有第一次才会触发load函数，之后在重新展开节点时，并不会触发load函数。 实现原理：同一个的节点多次重复操作展开子节点时只触发一次load加载函数。当一个节点的子节点展开时，其他节点的子节点收起，同时新展开的节点都需要触发load函数 手风琴模式： 根据element-ui文档创建树形表格 row-key ： 用来优化 Table
elementUI 中table表格展开收起实现手风琴效果（只展开一行）
weixin_46156770的博客
03-05 2216
<template> <el-table ref="table" :data="teamData" style="width: 100%;margin-bottom: 15px;" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expndChange"> <el-table-column type="expand"> <template s
Jquery——手风琴效果+表格全选
Zjaun的博客
02-13 598
手风琴样式与控件 &amp;amp;lt;style&amp;amp;gt; * { margin: 0; padding: 0; } ul { list-style: none; width: 1300px; } #box { width: 1200px; height: 400px; border:...
element-ui手风琴自定义html,element-ui中el-table expand 手风琴效果，展开里面的内容或者ta...
weixin_34498545的博客
06-15 870
element-ui中el-table expand 手风琴效果，展开里面的内容或者taelement-ui中el-table expand 手风琴效果，展开里面的内容或者table,展开下一个,上一个自动收起width="1"隐藏自带的小箭头...调用Table Methods里的方法this.$refs.table.toggleRowExpansion(row)源码收起展开export def...
Element UI 中可展开表格手风琴效果实现（toggleRowExpansion方法的正确使用方式）
热门推荐
钟大灵的博客
12-29 4万+
问题讲解：在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到官方代码中在这边没有让这个可展开tabl
Vue ElementUI el-collapse 改造：手风琴
前端技术
12-16 3661
一、源码 <template> <div class="left-tree"> <el-collapse class="tree-collapse" accordion v-model="activeName"> <el-collapse-item ref="clooapseItem" v-for="(tree, i) of treeNames" :name="i.toString()" :key="tree.na
纯CSS3手风琴列表ui界面设计带动画效果
ICode联盟
12-21 513
下载地址 IE浏览不支持IE9及以下浏览器。使用纯CSS3制作的动感垂直手风琴列表ui界面设计效果。该手风琴特效设计时尚，颜色搭配非常好，每次点击手风琴项时都带有很酷的动画效果。HTML结构该手风琴特效的每一个手风琴项使用的是元素和元素的组合。在元素中放置的是每一个手风琴项的具体内容。 8am - 10am Jamie talks design Monday - Thursday I talk a bunch of rubbish More information
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值