expand展开后自动闭合

最新推荐文章于 2024-05-28 10:34:53 发布
最新推荐文章于 2024-05-28 10:34:53 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： web前端开发 技术类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37901545/article/details/119840387
版权

elementui vue.js es6

解决el-table的expand-change方法触发后第一次自动闭合

分享一下在使用el-table的时候遇到的一个问题，就是在第一次展开子列表的时候，标签自动闭合。在网上搜索了一堆方案，感觉都不合适。于是着手新的解决方案。

问题原因：
首先el-table渲染数据后台返回数据colunmnList，这个时候点击展开发送新的接口查询当前的子列表数据unionArr，将unionArr赋值给colunmnList的时候，由于colunmnList没有unionArr属性，导致第一次展开失败自动关闭了。

解决方案：
在获取table数据后， 通过this.$set设置一个新的字段来接收查询子列表的数据即可。方案简单粗暴有效

如下：
columnList为列表展示数据，unionArr为展开发送新请求后的数据
在这里插入图片描述
在获取colunmnList的时候，给每条数据添加一个unionArr字段即可
在这里插入图片描述
转载请注明出处~

会飞的松鼠
关注
专栏目录
vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单
周家大小姐
08-29 1万+
<template> <div class="home" v-cloak> <div class="menu"> <p>下拉菜单</p> <div class="main" v-clickoutside=&q
Android自定义View——从零开始实现可展开收起的水平菜单栏
m0_64319455的博客
11-17 683
private int menuBackColor;//菜单栏背景色 private float menuStrokeSize;//菜单栏边框线的size private int menuStrokeColor;//菜单栏边框线的颜色 private float menuCornerRadius;//菜单栏圆角半径 public HorizontalExpandMenu(Context context) { super(context); this.mContext = context; init(); }
解决 Vue3+ElementPlus 使用table 展开行type=“expand“ 时，遇到行展开后又自动关闭的问题
最新发布
kentturing的博客
05-28 1736
（项目需求和element组件设计逻辑冲突，展开行默认初始化时已获取到tableData的所有数据，点击展开行时直接展示即可，项目需求为点击展开行时再获取数据动态渲染展开行）Element Plus table 的行展开状态是由数据驱动的，如果在展开行的过程中数据发生变化，即使是非关联数据的变化，都可能触发组件的重新渲染，从而导致已展开的行被自动关闭。expandChange方法获取数据后，用 :expand-row-keys="expandedRowKeys"来控制哪些行是展开的。
第十八篇：element UI type=“expand“，当展开的时候其他展开的自动闭合
maliyao4233的博客
08-23 340
【代码】element UI type="expand"，当展开的时候其他展开的自动闭合。
VUE 饿了么组件 el-table-column type=“expand“ 使用el-input需要点击两下才可以显示解决方案！
weixin_46068653的博客
09-19 2187
ElementUI中table组件设置列为type=“expand“时需要点击两下才可以正常显示
遍历含有expand的表格 打开弹层 操作展开表格的数据 所有展开的表格被闭合
你的阿迁
04-14 86
问题描述：接口获取的数据是数组对象 遍历表格的时候 直接将遍历出来的对象 直接放入到 '[ ]'中。页面表格数据渲染正常 但是点击按钮 打开弹层操作数据的时候 弹层正常显示 导致所有展开的表格被闭合。解决：在接口获取数据的时候 将数据进行处理 再进行赋值。
element的el-tree树结构-添加或删除子节点后(也就是数据刷新后)-保持节点状态不发生改变
m0_67063319的博客
08-09 3569
利用node-expand和node-collapse监听树展开和关闭的状态; 把展开的节点id push给defaultExpandKeys,保持展开状态; 再次点击此节点时-再从defaultExpandKeys数组内对应的id(节点)扔出去;
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
weixin_42300424的博客
12-24 1293
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明"vue": "^2.6.11","element-ui": "^2.13.0"实现思路准备工作mock了两个静态数据: classList 和 studentMap , 分别表示班级列表, 班级-学生列表映射关系.在表格中注入 @expand-change展开事件的处理函数handleExpa...
VIM打造成IDE
mill_li的博客
08-16 945
1.安装git 由于VIM的包管理软件Vundle需要Git支持，所以第一步我们先安装git sudo apt-get install git 2.安装Vundle Vundle是VIM的包管理软件，我们的插件大部分是通过这个包管理软件进行安装的，还有一部分是系统自带的，使用系统命令安装即可 2.1下载 执行git clone命令进行下载 git clone https://gi...
[MFC]CTreeView树形视图、CTreeCtrl树形控件
Lirx_Tech的专栏
10-21 1万+
1. 树形控件和树形视图：     1) 树形控件在Microsoft Windows95中就已经引入，如文件资源管理器中的树形文件列表就是使用树形控件实现的，这是树形控件最常见的应用；     2) 树形视图就是将整个树形控件作为视图模板的视图，就和之前做过的Phones列表视图一样，直接将CXXXView继承自CTreeCtrl即可；     3) 我们看到的资源管理器的左侧其实就是一个
解决vue3+element-plus 使用table 展开行时，删除或更新展开行中的数据，展开行自动合闭的问题
来杯卡布奇诺的博客
11-04 5840
解决vue3+element-plus 使用table 展开行时，删除或更新展开行中的数据，展开行自动合闭的问题问题描述解决方法 问题描述 在使用element-plus 中的table 展开行时，会有这种需求：修改完数据之后，可以直接在展开行中显示出最新的数据。 我一般通过修改自定义模板（slot）的参数（即下图中的props）来达到这一目的，而不是重新请求数据。 项目代码和上面截图中代码类似。测试时发现添加或删除展开行中数据时，展开行会自动关闭，通过$refs 也无法获取展开行中元素。 解决方法 可
vue-element el-table点击行展开，并且收起其他行
热门推荐
rainux
06-21 1万+
Code Is Never Die ! 代码行中已标注实现点击行展开，并且自动收起其他行的相关设置和代码。 el-table表格是绑定在vue实例上的，相关配置、绑定数据、事件 将这三部分可以直接Copy到自己的项目相关位置，无需修改可以直接使用 ! 1. el-table 相关配置 :row-key="getRowKeys" // 每一行的唯一key值 :expand-row-keys="expands" // 设置目前的展开行(须同时设置row-key) @expand-change="expand
切换el-tab 之后el-table会回缩问题
weixin_66193671的博客
04-11 432
在写项目时碰到这个问题，有可能是因为某个<el-table-column>的min-width 给的太小了，导致小于label的长度，比如某个label为Description，这时候min-width 给80 就时不够的，会出现回缩现象，只要给足了就不会出现这个问题。
解决Vue3+ElementPlus中table展开行，自动关闭且异步加载的问题
辞九门
06-27 1831
解决Vue3+ElementPlus中table展开行，自动关闭的问题
【elementUI】el-table 展开行默认关闭或打开
qq_35257117的博客
07-31 1万+
第一种方式： 使用 :default-expand-all=“isExpand” 优点：方便，简单，页面初始化的时候给 delfault-expand-all 赋值展开或关闭 缺点：不能手动操作 <el-table :data="titleShineData.dataList" class="table-reset" size="sm...
element-plus 扩展框为展开状态后，修改数时会自动收起
hln136285的博客
04-25 1264
template>family: [zip: [},},},],},zip: [},},},],},zip: [},},},],},],},family: [zip: [},},},],},zip: [},},},],},zip: [},},},],},],},family: [zip: [},},},],},zip: [},},},],},zip: [
解决element ui 使用table嵌套table时，在展开下拉列表时，自动关闭的bug
陈先生的博客
10-26 1153
解决element ui 使用table嵌套table时，在展开下拉列表时，自动关闭的bug
el-table展开行，@expand-change=“expandChange“第一次没办法出现，第二次数据就出现了
蓦然回首，那人却在，灯火阑珊处。
02-07 1544
数据实时展示
element ui table expand 展开关闭功能
qq_41694319的博客
01-12 2089
<el-button plain class="productEnBtn" type="primary" size="mini" @click="handleCreate()"> 新增 </el-button> <el-table :key="tableKey" v-loading="listLoading" :data="pdComponentData" :expand-row-keys="exp..
el-table expand 展开闪动
05-11
el-table的expand展开闪动，通常是由于DOM重绘引起的。因为在展开行时，el-table需要重新计算表格的高度，如果计算时间较长，就会导致页面上出现闪动的情况。 解决这个问题的方法可以有以下几种： 1. 设置el-table的row-key属性：这样可以让el-table在展开行时，只渲染指定的行，而不是全部重新渲染。 2. 设置el-table的max-height属性：这样可以限制el-table的最大高度，从而减少DOM重绘的次数。 3. 使用keep-alive组件：将el-table包裹在keep-alive组件中，可以使el-table在展开行时不会被销毁，从而减少DOM重绘的次数。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值