Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork30.7k
renderHeader的表头数据变化时,表头不会重新渲染问题的解决方法#4088
qq2267222680 started this conversation inShow and tell
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
场景:我想要些一个渲染在表头中的下拉菜单,用于控制表中各列的显示。(下拉菜单中采用文字+switch按钮)解法1:将renderHeader更换为slot="header"的方式,并添加:key="Math.random()"。!!!但是该方法重新渲染会将下拉菜单收回,而我想要保持显示。!!!<el-table-column:key="Math.random()"><templateslot="header"><el-dropdowntrigger="click":hide-on-click="false"><el-buttonicon="el-icon-setting"type="text"/><el-dropdown-menuslot="dropdown"style="width: 240px"><el-dropdown-itemv-for="col of cols":key="col.name"style="position: relative"> {{ col.label }}<el-switchv-model="tempValue"active-color="#13ce66"style="position:absolute; right:0; top: 8px"/></el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column> 加key的方法来自CSDN老哥“新津之虎--曹达华”的文章:https://blog.csdn.net/Admin_yws/article/details/111572887 解法2:将slot="header"改为#header。<template#header> 该方法来自CSDN老哥“找不到的二蛋”的文章:https://blog.csdn.net/ITk_Programmer/article/details/122216651 解法3:调用table的doLayout()函数beforeUpdate(){this.$nextTick(()=>{// 重新渲染表格,防止后渲染而出现格式抖动this.$refs['table'].doLayout()})} 该方法还能解决表格列动态显示(新增或移除)时的抖动问题,因此推荐第三种方法。 |
BetaWas this translation helpful?Give feedback.
All reactions
Replies: 1 comment
-
网络问题导致发重复成两条了,见谅 |
BetaWas this translation helpful?Give feedback.
All reactions
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment