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

最新推荐文章于 2024-08-15 11:20:33 发布
转载 最新推荐文章于 2024-08-15 11:20:33 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wuhuaguo/p/10492559.html
文章标签：

#javascript #ui #ViewUI

本文探讨了在Element UI的<el-table>组件中使用expand模板嵌套table时出现的渲染两次的问题。详细分析了fixed属性导致此现象的原因，并提供了解决方案，即移除fixed属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天开发的时候遇到一个问题，<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

初仔仔
关注
Element-UI 进阶-第四篇：数据展示组件强化
无
05-10 111
在使用Element-UI构建前端应用时，表格、树形控件等数据展示组件是承载业务数据的关键载体。随着项目复杂度提升，实现其复杂功能并保障大数据量下的性能，成为开发者的重要任务。本文将围绕这两大核心内容，深入探讨相关实现与优化方案。
（近5w字）面向小白のVue全家桶开发电商管理系统项目总结文档
超逸の学习技术博客
07-05 2527
（近5w字）面向小白のVue全家桶开发电商管理系统项目，挖掘项目亮点，提供学习地址。
vue采坑日记， el-table内包含子组件，配合使用固定列 fixed 属性 导致的问题。
徐林的博客
07-31 2012
问题说明：在使用table组件时，内嵌了子组件做行修改，然后配合了fixed属性做列固定，结果导致了只要新增或者删除行，子组件就会连续渲染三次，如果有多行，就会行数x3的重复渲染。 这个BUG找了好久，采坑分享的也不多。 目前还没有找到解决办法，只能先去掉 fixed。 ...
记录el-table 开启 列 fixed 后引发的内部组件重复渲染问题
Alexis_优快云的博客
12-04 2661
el-table对于列的居左、居右（即）功能实现 采用的方式是将多个el-table进行拼凑，也就是说设置了居左、居右后，将出现三个el-table, 分别为 【居左】、【中间滚动区域】、【居右】 的el-table拼凑出浮动功能。这将可能引起重复渲染组件带来的bug。此文章将记录在此背景下的两个需求引发的问题及解决方案。
element-ui el-table fixed踩坑
weixin_50805614的博客
07-15 604
el-table中fixed导致的问题
elment-ui el-tabs组件 每次点击后 created方法都会执行2次
IT博客技术分享
03-19 1873
在element-ui的tabs组件中，我们发现每次切换页面，所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时，这样会过多的占用网络资源。这里我们可以使用v-if 来进行判断是否渲染该子页面。不会如何在。
elementUI中table组件expand会渲染两次的bug
jikangjian的博客
11-07 3973
<el-table>中的expand模板中嵌套一个table，这个table会被渲染两次 父组件table里面具有fixed属性的table会这样，请删掉它 ,找了一下午 ,才发现接口请求两次的罪魁祸首 ...
elementUI中table组件固定列时会渲染两次模板内容问题
幸运小男神的博客
07-04 1054
查阅资料发现，elementUI的固定列的实现原理是将两个表格拼装而成，因此获取的对象也是两个。对于需要使用对象的方法的，可以使用for循环逐个调用方法，或者调整业务将固定列的需求删除。今天在使用elementUI的table组件时，由于业务需要固定表格的前几项列，然后获取表格对象时发现竟然有两个对象。
el-table中expand行展开内容渲染两次，重复请求
weixin_55254452的博客
08-15 512
el-table的行展开内容重复渲染两遍
element中el-table，type=‘expand‘展开行，@expand-change=“ “事件动态数据刷新问题
Gaosijie666的博客
06-28 1761
element中el-table，type='expand’展开行，@expand-change=" "事件动态数据刷新问题 遇到了这个问题，按照以下方式解决了： https://segmentfault.com/a/1190000022758516 然后导师说 尝试用一个load事件等待数据获取到了填进去，这个思路还没试，不过我觉得当点击展开行后数据已经获取到了，这个Dom也已经渲染完毕了，dom先渲染的，所以数据总是慢一步回显，按照导师那个思路感觉应该不行吧，但是还没试，先记录下，之后试试吧。 ..
Element-UI自学实践（一）
weixin_40017062的博客
08-13 553
Element-UI自学实践
row-expand-change 不运行
最新发布
06-07
避免在`row-expand-change`中使用异步操作引用[2]中提到，在`@expand-change`（与`row-expand-change`类似）中使用异步方法可能导致问题（如需要点击两次）。因此，如果事件触发函数中有异步操作，需要谨慎处理。**...
二次封装select
09-13
此外，你还可以参考引用中关于使用elementUI Select选择器和Pagination分页组件进行性能优化处理的内容，这也可以作为你记录二次封装select的参考。希望这些内容对你有帮助。 文章目录: 一、单选、多选select分页...
element-table 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug
rich_c的博客
11-11 1436
element-iu 展开行type=expand,如果在同个页面有多个表格，用v-if控制显示和隐藏还需要加上key,要不然会有bug
element表格内组件执行多次的原因以及解决方法
我是小奶音啊的博客
01-24 4112
如图: table表格里引用了自己封装的select组件，但是子组件在created里总是执行两次(因为我在created里请求接口了),后来发现是表格里写了fixed的缘故,fixed会让表格重新复制一遍，这样就相当于加载了两次表格的dom，所以子組件才会执行两遍 fixed复制可以查看我的另一篇博客,讲的相对细致https://blog.youkuaiyun.com/weixin_44157964/article/details/120205080 解决方法: 如果fixed没有用到的话,可以去掉fixed 如
vue+element 导出表格使用el-table的fixed属性,导致数据重复
聆听
07-13 2071
分析：我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。 //导出 export2excel () { /* '#export2excel '关联导出的dom节点 */ var fix = document.querySelector('.el-table__fixed'); // 判断要导出的节
vue + elementUI 表格组件重复出现
凝涵的博客
05-03 1680
两个div 通过activeName进行判断展示哪个，然后呢每个div里都是不同的el-table，然而情况却是： 第二个表格 Column设置变成了第一个的。第二个表格并没有使用展开列，但是却因为vue的组件重复利用的特性，延用了第一个表格的。 我隐约记得，组件复用是不能影响整个界面的正常使用的，假如说，我给第二个table 所在的div添加一个id 属性，那么在vue复用时就得考虑会不会出现如果复用 id属性的数据丢失。肯定就不会处理第二个div时去复用第一个div了。 所以就在第二个..
使用fixed进行表格列冻结之后出现的问题
Gua_guagua的博客
12-12 661
使用fixed进行表格列冻结之后出现滚动条遮挡 .el-table__fixed { bottom: 17px !important; height: auto !important; } 解决了遮挡之后，最后一行还是会有冻结列和非冻结列错位的问题，解决办法如下： .el-table__fixed-body-wrapper{ padding-bottom: 18px; } ...
element中el-table，type=expand展开行，expand-change=事件获取动态数据，dom渲染刷新问题(第一次不显示，第二次显示)
热门推荐
weixin_47711284的博客
05-27 2万+
前言 最近在写项目的时候，有个使用el-table内嵌动态table的功能需求，也就是table内嵌table，同时里面的table数据是动态获取的，动态获取动态展开 问题 按照element的table里面的方法，行属性设置了type=‘expand’，也在table里面添加了@expand-change="expandChange"时间监听展开行事件，在监听时间里面动态获取数据赋值给里面展开的table， 问题出现了，第一次点开没数据，第二次点开才有数据 ①：第一次点开效果 ②：第二次展开数据显示出来
elementui中tree组件有二级的图标颜色变成黑色
03-12
<think>好的，我需要帮助用户修改ElementUI中Tree组件的二级图标颜色为黑色。首先，我得回忆一下ElementUI的文档和相关样式覆盖的方法。用户提到的是Tree组件，特别是二级节点的图标颜色。ElementUI的组件通常使用CSS类来定义样式，所以我需要找到对应的类名。 首先，Tree组件的节点图标可能使用类似于`el-icon-caret-right`这样的图标类。二级节点可能具有不同的类名或者结构，可能需要通过浏览器开发者工具来检查具体是哪个类。比如，使用Chrome的检查工具，找到对应的DOM元素，查看应用的CSS类。 然后，用户可能需要覆盖默认的图标颜色。通常，可以通过在全局样式文件或组件内的样式部分（使用scoped时需注意穿透）中重写CSS。例如，使用`!important`来覆盖原有样式，或者提高选择器的优先级。 另外，用户可能已经引入了ElementUI的组件，并需要在项目中修改主题色或特定组件的样式。根据引用[1]，用户可能在element.js中导入组件，所以可能需要在那里添加自定义样式，或者在单独的CSS文件中覆盖。 考虑到ElementUI的版本问题，不同版本的类名可能有所不同，需要确认用户使用的版本。不过，一般情况下，Tree组件的节点图标可能使用类似`.el-tree-node__expand-icon`这样的类。比如，二级节点的图标可能需要通过结构选择器来定位，比如`.el-tree-node__children .el-tree-node__expand-icon`。 颜色设置为黑色，可以使用CSS的`color`属性。可能需要同时修改图标的伪元素，因为ElementUI的图标可能使用::before伪元素来显示图标内容。因此，正确的CSS应该是： ```css .el-tree-node__children .el-tree-node__expand-icon { color: black !important; } ``` 或者针对伪元素： ```css .el-tree-node__children .el-tree-node__expand-icon::before { color: black !important; } ``` 此外，用户需要注意样式的作用域。如果是在Vue的单文件组件中，使用了scoped属性，可能需要使用深度选择器`::v-deep`或`/deep/`来穿透作用域。例如： ```css ::v-deep .el-tree-node__children .el-tree-node__expand-icon { color: black !important; } ``` 根据引用[2]中的例子，用户可能尝试过直接修改样式但被默认样式覆盖，因此需要使用更具体的选择器或`!important`。 最后，测试修改后的样式是否生效，可能需要清除浏览器缓存或重新编译项目。如果还有其他层级的节点需要处理，可能需要调整选择器的层级结构。确保只针对二级节点，而不会影响其他层级的图标颜色。</think>要修改ElementUI的Tree组件中二级节点的图标颜色为黑色，可以通过以下步骤实现： 1. **定位图标CSS类名** 使用浏览器开发者工具检查二级节点图标，发现其类名为`el-tree-node__expand-icon`，其中二级节点位于`.el-tree-node__children`容器内[^3]。 2. **添加自定义CSS样式** 在全局样式文件中添加（推荐在`App.vue`或独立CSS文件）： ```css /* 定位二级节点图标 */ .el-tree-node__children .el-tree-node__expand-icon { color: black !important; } /* 处理图标伪元素 */ .el-tree-node__children .el-tree-node__expand-icon::before { color: inherit !important; } ``` 3. **作用域穿透（Vue单文件组件）** 若在`<style scoped>`中修改，需使用深度选择器： ```css ::v-deep(.el-tree-node__children) .el-tree-node__expand-icon { color: black !important; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值