解决el-table中嵌套el-dialog导致多次渲染el-dialog问题

原创 于 2024-12-14 10:50:55 发布 · 335 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui #vue

解决el-table中嵌套el-dialog导致多次渲染el-dialog问题

问题如下

Video_2024-12-14_103135

问题解决

Video_2024-12-14_103852

说明

el-table会将template中所有的元素会被遍历渲染，所以会使el-dialog渲染多次，把el-dialog放在el-table外面就解决了。

唐老鸭.
关注
vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题
coderYYY的博客
06-09 1398
使用sortable.js实现el-table行拖拽
【仿el-transfer穿梭框】el-tree+el-table组合实现，踩坑记
花椒和蕊的博客
10-11 1274
仅贴相关代码，有啥问题欢迎沟通交流。主要思路就是左树右表，
解决vue+Element+dialog,每次打开关闭弹框都不会重新渲染数据，仍保持在上一次数据记录
qq_45086494的博客
01-10 2121
解决vue+Element+dialog,每次打开关闭弹框都不会重新渲染数据，仍保持在上一次数据记录
同一个页面使用2次el-dialog弹窗，页面错乱的问题
weixin_48282959的博客
08-06 569
同一个页面使用2次el-dialog弹窗，页面会发生错乱，此时可以给el-diglog加上append-to-body，这样就可以解决，如。我在项目中是在第二个弹窗中使用append-to-body，可以完美解决。
有关element UI el-table 跟el-dialog搭配使用出现的问题，背景问题，穿透问题
蒾酒的博客
12-15 1521
我自己封装了弹窗组件设置定位position: fixed;当你把放在里面神奇的事情就会发生。一定不要把放在里面。开启阴暗背景（默认）： :modal="true"阴暗背景：:modal="true"默认就是开启。这时候关闭阴暗背景：:modal="false"关闭阴暗背景：:modal="false"可以看到在弹窗还是有一圈黑色阴影的。可以看到列表的底线居然覆盖到了弹窗。
el-dialog中嵌套el-table，el-table-column使用type=“selection“，关闭弹窗后再次打开选择框消失问题
paaaaak的博客
03-25 504
标签上添加一个if判断，比如说将外层dialog控制显隐的变量，同样加在el-table标签上即可。只在el-table-column上添加判断无法生效，可以在。
el-dialog中使用el-table的多选回显、分页切换选中状态
feiyupang的博客
10-23 629
el-dialog中使用el-table呈现多条数据，且可多选，初始化选中的数据需要深拷贝，否则选中之后触发父组件事件时会陷入死循环，深拷贝导致el-table中已选中的数据无法记录，因此每次el-dialog显示和更新el-table数据时都需要手动更新选中状态.给el-talbe的row-key设置唯一值，设置selection和reserveSelection为true,el-dialog显示和刷新el-table数据时手动更新选中状态,关闭el-dialog时清空选中状态。
Element Plus封装el-dialog、el-table、el-select表格对话框，实现单选多选场景。
m0_67584973的博客
06-08 3851
Element Plus 封装表格对话框组件，实现单选以及多选的场景。
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 2102
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
vue el-table实现自定义表头
10-15
自定义表头功能的实现，需要在el-table组件中使用template标签，并在其中嵌套el-table-column组件。el-table-column组件用于定义表格的列数据，而slot="header"则是在el-table-column内部使用，用于定义该列的表头。...
elementui el-dialog 内的el-table 数据多了，只能显示一部分，显示不全
最新发布
10-12
首先，用户的问题是：解决ElementUI中el-dialog内的el-table数据多了显示不全的问题。用户提到了el-table在el-dialog中数据多时显示不全，需要找到解决办法。 现在，看看用户提供的引用： - 引用[1]：显示el-table...
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题
weixin_44269229的博客
10-25 1933
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题
el-dialog跳转后出现透明黑屏解决
企业数字化转型卫淼全栈技术工作室
04-29 1368
el-dialog跳转后出现透明黑屏解决，排查后发现是弹出框组件的bug。 解决方案：跳转的时候关闭掉弹出框。
dialog打开时重新渲染
Y2000104的博客
12-06 1339
需要注意的是，当 dialog 打开后，如果需要再次重新渲染对话框内容，handleVisibleChange 方法可能会被多次调用。如果重新渲染逻辑非常耗时，可能会造成性能问题。因此，建议在实现重新渲染逻辑时，尽可能避免出现问题。在这个例子中，当 dialog 显示时，handleVisibleChange 方法将重新渲染并更新 currentTime 的值。当 dialog 打开时，常常需要重新渲染对应的内容。在 handleVisibleChange 方法中实现重新渲染的逻辑。
el-dialog和el-table结合增删改查，el-dialog共用增加修改
m0_59925573的博客
09-18 631
方法:注意在对话框关闭之后（不管是提交关闭还是右上角关闭）一定要回调清理数据，否则会残留数据。
el-dialog嵌套的影响、原因及解决方法
热门推荐
卡卡的博客
06-21 1万+
用Dialog嵌套Dialog所踩过的坑
el-table在弹窗中的使用
12-02 1322
Vue2 element-ui 在弹窗中使用el-table，实战中的一些解决方案
v-for遍历渲染el-table-column
weixin_43588661的博客
07-30 965
加入this.$refs.xxx.doLayout()发现 tittleList第一次更新后列表不变化蛋痛！，多次调试后发现第二次没变化第三次还是变化了但是更新的是第二次tittleList更新的值，卧槽离了大普，各种查证各种找资料mmp，还是没找到原因，加入updated里面设置定时器还是不行非要第三次更新后才会更新值，救命！使用v-for渲染表头。
el-table中每行嵌套的el-dialog
weixin_43792451的博客
06-23 1068
欸，感觉这个问题还挺基础的。而一开始未能及时排查出重复渲染问题的原因是，虽然重复渲染了多次dialog，但每个dialog所绑定的开启事件和关闭事件是完全相同的，打开和关闭dialog过程中除了加载略卡，其他并无异样。项目中dialog需要渲染的是每种原油的70多种属性的数据，el-table负责对多种原油的属性数据进行渲染，在点击详情后弹出dialog展示对应油种的属性数据。可以看到，el-table底层的逻辑是将待渲染的列表遍历一遍，同时column内的template中所有的元素会被遍历渲染。
el-dialog子组件el-table勾选回显第一次不回显问题
04-24
<think>好的，用户遇到了在el-dialog中嵌套el-table时，勾选回显第一次不生效的问题。根据引用内容，问题是由于dialog设置了destroy-on-close属性，导致关闭时内部元素被销毁，再次打开时table是重新渲染的，所以复选框无法正确回显。我需要找到解决方案，确保即使组件被销毁，再次打开时也能恢复选中状态。 首先，用户提到第一次打开时勾选没问题，但关闭后再次打开时回显失效。这可能是因为在关闭dialog时，el-table被销毁，而选中状态没有保存下来。因此，解决方案的关键在于保存选中状态，并在重新打开时重新应用。 接下来，我需要考虑如何保存这些选中状态。通常，Vue组件的数据是响应式的，可以存储在data中。当dialog关闭时，虽然组件被销毁，但父组件的数据可能仍然存在。因此，可以在父组件中维护一个变量，比如selectedRows，用于存储选中的行数据。 然后，在el-table的勾选事件中，需要将选中的行数据同步到selectedRows中。当用户重新打开dialog时，利用el-table的setSelection方法手动设置选中状态。但要注意，必须在表格数据加载完成后才能调用这个方法，否则可能因为数据未渲染而无法正确选中。可以使用this.$nextTick来确保DOM更新完成后再执行设置。 另外，关于destroy-on-close属性，如果用户希望保留dialog的状态，可以考虑移除该属性。但这样可能会导致内存泄漏，因为dialog及其子组件不会被销毁。因此，更推荐的做法是即使销毁组件，也能通过保存和恢复状态来解决回显问题。 还需要检查row-key的设置是否正确。确保每一行有唯一的标识符，这样在重新渲染时，el-table能够正确识别每一行，从而应用选中状态。如果没有正确设置row-key，可能会导致复选框无法正确关联到对应的行数据。 最后，可能需要提供代码示例，展示如何在父组件中保存选中数据，并在dialog打开时初始化表格的选中状态。例如，在打开dialog的方法中，调用初始化函数，使用toggleRowSelection来恢复选中。</think>### 解决方案分步说明 #### 问题分析 el-table勾选状态首次回显失效的根本原因在于： 1. `destroy-on-close`属性导致组件销毁重建 2. 表格重新渲染时未主动恢复选中状态 3. 勾选状态未与外部数据源保持强绑定 #### 具体解决方法 1. **状态存储** 在父组件中定义响应式变量存储选中数据： ```javascript data() { return { selectedRows: [], // 存储勾选行数据 dialogVisible: false } } ``` 2. **双向绑定** 使用`@select`和`@select-all`事件同步勾选状态： ```html <el-table :data="tableData" @select="handleSelect" @select-all="handleSelectAll" row-key="id"> <!-- 关键属性 --> </el-table> ``` ```javascript methods: { handleSelect(selection, row) { this.selectedRows = selection }, handleSelectAll(selection) { this.selectedRows = selection } } ``` 3. **状态恢复** 打开弹窗时主动设置选中状态： ```javascript async openDialog() { this.dialogVisible = true await this.$nextTick() // 等待表格渲染完成 this.$refs.mytable.clearSelection() this.tableData.forEach(row => { if (this.selectedRows.some(s => s.id === row.id)) { this.$refs.mytable.toggleRowSelection(row, true) } }) } ``` #### 关键配置说明 | 配置项 | 作用 | |------------------|--------------------------------------------------------------------| | `row-key` | 确保行数据唯一标识，建议使用数据库主键字段 | | `this.$nextTick` | 等待Vue完成DOM更新后再操作表格元素 | | `toggleRowSelection` | 动态设置行选中状态的API方法 | ### 优化建议 1. 当表格数据量较大时，使用`row.id`进行匹配比直接比较对象更高效 2. 对于分页加载场景，需要结合分页参数进行状态管理 3. 可封装为mixin实现复用： ```javascript // tableSelectionMixin.js export default { data() { return { selectedRows: [] } }, methods: { restoreSelection(refName = 'table') { this.$nextTick(() => { this.$refs[refName].clearSelection() this.tableData.forEach(row => { if (this.selectedRows.find(s => s.id === row.id)) { this.$refs[refName].toggleRowSelection(row, true) } }) }) } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值