elementUI中table组件expand会渲染两次模板内容

最新推荐文章于 2024-08-15 11:20:33 发布
最新推荐文章于 2024-08-15 11:20:33 发布
阅读量2.3k 收藏 1
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/wuhuaguo/p/10492559.html
版权

今天开发的时候遇到一个问题，<el-table>中的expand模板中嵌套一个table，这个table会被渲染两次

原因： The fixed attribute in <el-table-column> will causes <el-table-body> to be rendered twice

具有fixed属性的table会这样，因为现在 fixed table 的实现方式就是用多个 table 拼装而成的，实现方式不一样，去掉fixed属性就好了

https://github.com/ElemeFE/element/issues/12177

转载于:https://www.cnblogs.com/wuhuaguo/p/10492559.html

初仔仔
关注
vue + elementUI 表格组件重复出现
凝涵的博客
05-03 1581
两个div 通过activeName进行判断展示哪个，然后呢每个div里都是不同的el-table，然而情况却是： 第二个表格 Column设置变成了第一个的。第二个表格并没有使用展开列，但是却因为vue的组件重复利用的特性，延用了第一个表格的。 我隐约记得，组件复用是不能影响整个界面的正常使用的，假如说，我给第二个table 所在的div添加一个id 属性，那么在vue复用时就得考虑会不会出现如果复用 id属性的数据丢失。肯定就不会处理第二个div时去复用第一个div了。 所以就在第二个..
elementUI中table组件expand会渲染两次的bug
jikangjian的博客
11-07 3791
<el-table>中的expand模板中嵌套一个table，这个table会被渲染两次 父组件table里面具有fixed属性的table会这样，请删掉它 ,找了一下午 ,才发现接口请求两次的罪魁祸首 ...
el-table中expand行展开内容渲染两次，重复请求
最新发布
weixin_55254452的博客
08-15 173
el-table的行展开内容重复渲染两遍
记录el-table 开启 列 fixed 后引发的内部组件重复渲染问题
Alexis_CSDN的博客
12-04 1856
el-table对于列的居左、居右（即）功能实现 采用的方式是将多个el-table进行拼凑，也就是说设置了居左、居右后，将出现三个el-table, 分别为 【居左】、【中间滚动区域】、【居右】 的el-table拼凑出浮动功能。这将可能引起重复渲染组件带来的bug。此文章将记录在此背景下的两个需求引发的问题及解决方案。
elementUI中table组件固定列时会渲染两次模板内容问题
幸运小男神的博客
07-04 640
查阅资料发现，elementUI的固定列的实现原理是将两个表格拼装而成，因此获取的对象也是两个。对于需要使用对象的方法的，可以使用for循环逐个调用方法，或者调整业务将固定列的需求删除。今天在使用elementUI的table组件时，由于业务需要固定表格的前几项列，然后获取表格对象时发现竟然有两个对象。
element中el-table，type=‘expand‘展开行，@expand-change=“ “事件动态数据刷新问题
Gaosijie666的博客
06-28 1704
element中el-table，type='expand’展开行，@expand-change=" "事件动态数据刷新问题 遇到了这个问题，按照以下方式解决了： https://segmentfault.com/a/1190000022758516 然后导师说 尝试用一个load事件等待数据获取到了填进去，这个思路还没试，不过我觉得当点击展开行后数据已经获取到了，这个Dom也已经渲染完毕了，dom先渲染的，所以数据总是慢一步回显，按照导师那个思路感觉应该不行吧，但是还没试，先记录下，之后试试吧。 ..
elementUI table组件
11-09
elementUI table组件 使用vue组件编写的el-table 反正就是一个表格组件， <el-table ref="table" v-loading="pageParm.loading" :max-height="pageParm.tableHeight || undefined" :data="data" :default-...
基于ElementUI table组件修改，数据化表格结构，添加实用功能，快速生成表格.zip
01-05
本教程将深入探讨如何基于ElementUI的table组件进行定制，添加实用功能，并快速生成表格。 一、ElementUI Table组件基础 ElementUI的Table组件提供了一种简单的方式去构建响应式的、可操作的数据表格。它支持多种...
使用element-ui table expand展开行实现手风琴效果
10-17
在本文中，我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细...
基于vue与elementui组件中talbe实现的无限级联treetable
08-10
在标题"基于vue与elementui组件中talbe实现的无限级联treetable"中，我们关注的重点是`Tree Table`和`无限级联`。Tree Table是一种结合了表格和树状结构的组件，可以用来展示具有层级关系的数据，如组织结构、文件...
elementUI table expand 隐藏展开列 width=“1“
m0_37312185的博客
11-24 528
elementUI table expand 隐藏展开列 width="1"
element-table 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug
rich_c的博客
11-11 1226
element-iu 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug
element表格内组件执行多次的原因以及解决方法
我是小奶音啊的博客
01-24 3816
如图: table表格里引用了自己封装的select组件，但是子组件在created里总是执行两次(因为我在created里请求接口了),后来发现是表格里写了fixed的缘故,fixed会让表格重新复制一遍，这样就相当于加载了两次表格的dom，所以子組件才会执行两遍 fixed复制可以查看我的另一篇博客,讲的相对细致https://blog.csdn.net/weixin_44157964/article/details/120205080 解决方法: 如果fixed没有用到的话,可以去掉fixed 如
vue+element 导出表格使用el-table的fixed属性,导致数据重复
聆听
07-13 1950
分析：我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。 //导出 export2excel () { /* '#export2excel '关联导出的dom节点 */ var fix = document.querySelector('.el-table__fixed'); // 判断要导出的节
vue采坑日记， el-table内包含子组件，配合使用固定列 fixed 属性 导致的问题。
徐林的博客
07-31 1954
问题说明：在使用table组件时，内嵌了子组件做行修改，然后配合了fixed属性做列固定，结果导致了只要新增或者删除行，子组件就会连续渲染三次，如果有多行，就会行数x3的重复渲染。 这个BUG找了好久，采坑分享的也不多。 目前还没有找到解决办法，只能先去掉 fixed。 ...
使用fixed进行表格列冻结之后出现的问题
Gua_guagua的博客
12-12 567
使用fixed进行表格列冻结之后出现滚动条遮挡 .el-table__fixed { bottom: 17px !important; height: auto !important; } 解决了遮挡之后，最后一行还是会有冻结列和非冻结列错位的问题，解决办法如下： .el-table__fixed-body-wrapper{ padding-bottom: 18px; } ...
el-table-column设置fixed后，el-popover出现两个的解决办法。
yxorg的博客
11-17 2833
el-popover出现多个bug
【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
热门推荐
Sabrina_cc的博客
08-01 1万+
对于el-table自带展开行，功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。 希望：对于每次展开行的操作，操作之后该行继续展开。...
elementui表格父子表_elementUI中Table表格问题的解决方法
05-20
ElementUI中的Table表格支持父子表格的展示，可以通过设置`expand-row-keys`属性来实现。 首先，在表格数据中添加一个`children`字段，用于存储子表格数据。例如： ```javascript tableData: [ { id: 1, name: '张三', age: 20, children: [ { id: 11, name: '张三的儿子', age: 1 }, { id: 12, name: '张三的女儿', age: 3 } ] }, { id: 2, name: '李四', age: 25 } ] ``` 然后，在Table表格中设置`expand-row-keys`属性为一个数组，数组中的元素为需要展开的行的key值。例如： ```html <el-table :data="tableData" :expand-row-keys="expandRowKeys"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button v-if="scope.row.children" @click="toggleExpand(scope.row)">展开/收起</el-button> </template> </el-table-column> <el-table-column prop="name" label="子表格" type="expand"> <template slot-scope="scope"> <el-table :data="scope.row.children"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> </el-table-column> </el-table> ``` 其中，`toggleExpand`方法用于切换展开和收起状态，并将展开的行的key值存储在`expandRowKeys`数组中。 ```javascript methods: { toggleExpand(row) { const index = this.expandRowKeys.indexOf(row.$key); if (index === -1) { this.expandRowKeys.push(row.$key); } else { this.expandRowKeys.splice(index, 1); } } } ``` 这样就可以实现父子表格的展示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值