elementUI中table组件expand会渲染两次的bug

最新推荐文章于 2024-09-12 09:46:44 发布
最新推荐文章于 2024-09-12 09:46:44 发布
阅读量3.8k 收藏 4
点赞数 6
分类专栏： js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jikangjian/article/details/102961525
版权

<el-table>中的expand模板中嵌套一个table，这个table会被渲染两次

 

父组件table里面具有fixed属性的table会这样，请删掉它 ,找了一下午 ,才发现接口请求两次的罪魁祸首

 

敌人-别人家的孩子
关注
专栏目录
【关于element ui使用所遇问题01】element ui表格组件 扩展行展开时通过@expand-change异步加载数据，页面不更新问题，第一次展开没有数据，第二次点击显示
weixin_43624943的博客
12-15 3721
前言 最近在写项目的时候，有个使用el-table内嵌动态table的功能需求，也就是table内嵌table，同时里面的table数据是动态获取的，动态获取动态展开 问题 按照element的table里面的方法，行属性设置了type=‘expand’，也在table里面添加了@expand-change="expandChange"事件监听展开行事件，在监听事件里面动态获取数据赋值给里面展开的table， 问题出现了，第一次点开没数据，第二次点开才有数据 ①：第一次点开效果 ②：第二次展开数据显示出来
element-ui手风琴自定义html,使用element-ui table expand展开行实现手风琴效果
weixin_31935149的博客
06-15 1170
写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果。效果前瞻：先删减一下代码：查看详情{{ props.row.name }}export default {data() {return {tableData5: [{id: '1',name: '好滋好味鸡蛋仔1',desc: '荷兰优质淡奶，奶香浓而不腻1',}, {id: '...
elementUI中table组件固定列时会渲染两次模板内容问题
幸运小男神的博客
07-04 701
查阅资料发现，elementUI的固定列的实现原理是将两个表格拼装而成，因此获取的对象也是两个。对于需要使用对象的方法的，可以使用for循环逐个调用方法，或者调整业务将固定列的需求删除。今天在使用elementUI的table组件时，由于业务需要固定表格的前几项列，然后获取表格对象时发现竟然有两个对象。
element-ui使用el-table的展开行多次渲染bug
weixin_43871182的博客
01-07 2681
aa
【UI】element ui table（表格）expand实现点击一行展开功能
最新发布
amoureux555的博客
09-12 1804
使用element-ui中table expand展开行控制显示隐藏，隐藏小箭头列的方法，只展开一行内容 点击当前行展开
elementUI中table组件expand会渲染两次模板内容
weixin_30640769的博客
03-07 2315
今天开发的时候遇到一个问题，<el-table>中的expand模板中嵌套一个table，这个table会被渲染两次 原因： The fixed attribute in <el-table-column> will causes <el-table-body> to be rendered twice 具有fixed属性的table会这样，因为现在 fix...
记录el-table 开启 列 fixed 后引发的内部组件重复渲染问题
Alexis_CSDN的博客
12-04 2003
el-table对于列的居左、居右（即）功能实现 采用的方式是将多个el-table进行拼凑，也就是说设置了居左、居右后，将出现三个el-table, 分别为 【居左】、【中间滚动区域】、【居右】 的el-table拼凑出浮动功能。这将可能引起重复渲染组件带来的bug。此文章将记录在此背景下的两个需求引发的问题及解决方案。
el-table中expand行展开内容渲染两次，重复请求
weixin_55254452的博客
08-15 228
el-table的行展开内容重复渲染两遍
elment-ui table固定列el-popover出现多个
是夜色太荒芜的专栏
06-27 3267
table固定列el-popover出现多个 解决办法:ref="popover-${data.id}" 触发popover时设置document.getElementById(this.refs[key].refs[key].refs[key].refs.popper.id).style.display = ‘none’ <el-popover v-model="data.popShow" v-permission="permission.del"
vue、element ui中使用组件比如tinymce或el-tree等二次渲染问题
VanCool
05-26 1467
记录一下用vue和element ui经常遇到的渲染问题 有时在页面初始化好组件后，修改了值保存需要再次打开组件，发现页面并没有重新渲染。这和vue的渲染机制有关， Vue中的nextTick涉及到Vue中DOM的异步更新。 需要在每次渲染前将组件置为false，等到$nextTick方法后置为true显示。注意nextTick放在回调函数中 <tinymce v-if="showIntroduction" v-model="introduction" :hei
基于vue3+ts配置化table表格组件实现浅析
junner443的博客
06-20 3564
基于vue3+ts配置化table表格组件实现浅析，同时兼容element-plus和ant-design-vue
ElementUI中的 table expand异步加载，需要点2次才渲染数据的问题解决
just路人周
08-28 5357
原因大家都懂，我就不说了，解决方案一大堆，什么$set(),改css的，我都试了，全部没效果，仍然需要点2次才出现数据。我想要实现的是点开每一行的expand,显示的是该行数据的children数据，点开另外一行，不会影响到其他行，各行只显示他自己的children数据。先贴我成功的代码 <!-- 外层表格 row-key="id" :expand-row-keys="expandKeys" 必须有 --> <el-table :data="dataList" fit styl
elment ui 组件bug总结
IT博客技术分享
04-04 3892
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗 第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import Elem.
element表格内组件执行多次的原因以及解决方法
我是小奶音啊的博客
01-24 3862
如图: table表格里引用了自己封装的select组件，但是子组件在created里总是执行两次(因为我在created里请求接口了),后来发现是表格里写了fixed的缘故,fixed会让表格重新复制一遍，这样就相当于加载了两次表格的dom，所以子組件才会执行两遍 fixed复制可以查看我的另一篇博客,讲的相对细致https://blog.csdn.net/weixin_44157964/article/details/120205080 解决方法: 如果fixed没有用到的话,可以去掉fixed 如
element ui表格组件 扩展行展开时通过@expand-change异步加载数据，页面不更新问题，第一次展开没有数据，第二次点击显示
Start的小笔记
03-10 1395
尝试过set 和 this.$forceUpdate() 的方式 ，也是不行 先将 请求响应的数据 res.rows 将外层数据进行遍历新增 subTable字段，然后再将 修改后的res数据给到 list 遍历table method: { //// 拿外层table数据 async getList() { let params = { page: this.page, } let res = await task.
elment ui 表格fixed固定列之后渲染行错位--已解决
weixin_42630688的博客
10-20 4828
问题描述： 项目使用element table 中有些页面出现行渲染行错位，错位的table都是由于使用了fixed固定列导致 原因分析： table首次渲染时el-table__fixed-body-wrappertop值计算有问题 解决方案： 触发表格重新渲染 1. 测试用使用foreUpdate,无效 mounted() { setTimeout(()=> { this.$forceUpdate(); },200) }, 2...
vue+element 导出表格使用el-table的fixed属性,导致数据重复
聆听
07-13 1973
分析：我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。 //导出 export2excel () { /* '#export2excel '关联导出的dom节点 */ var fix = document.querySelector('.el-table__fixed'); // 判断要导出的节
Ant Design vue3版本里面a-table第一列合并相同的，第二列可以展开子集（修复bug版）
qq_49074952的博客
05-30 691
昨天那个解决方式经过测试发现只能满足最后一行是需要展开的任务时才生效，当任务行在中间，然后存在子集时，点击展开会出现错位的现象，如下图：又请教了一位大佬，大佬研究了两个多小时，最终完成功能实现，虽然有点看不咋懂，但记录一下下次遇到类似的好找。Design vue 中的table和vue3实现第一列动态合并相同数据，第二列以树形展开。合并方法：（此处将之前的方法删掉了许多，变动较大）主要变动：（获取数据的方法和展开方法）表格渲染：（此处增加了展开的方法）表头渲染：（此处并无太大修改）
element使用type=“expand“出现数据多次渲染bug
weixin_55798503的博客
10-13 586
移除el-table-column存在fixed属性。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值