vue 解决el-table 表体数据发生变化时,未重新渲染问题|页面不更新问题
第一种情况,直接把key写在表格上
一、所遇到的问题
在使用el-table组件
时,数据已经发生了变化,但是页面显示的数据却没变化;
二、解决办法
在el-table中添加一个key,可以设置成boolean类型的,在数据更新后更新这个key;
1 <el-table :data="currentRecordList" :key="isUpdate"> 2 <el-table-column prop="address" label="Sender" min-width="10%" /> 3 <el-table-column prop="date" label="Date" min-width="15%" /> 4 <el-table-column label="Message conten" min-width="40%"> 5 <template slot-scope="scope"> 6 <span v-if="scope.row.bodyHighlights" v-html="scope.row.bodyHighlights"></span> 7 <span v-else>{{ scope.row.body }}</span> 8 </template> 9 </el-table-column> 10 </el-table>
在数据更新的地方后面加上如下
this.isUpdate = !this.isUpdate;
第二种情况,可能只需要更新某一列的某一个数据,那么直接把key放在这列上就可以
<el-table-column prop="expectedAmount" label="预计支付金额" :key="isUpdate" /> data() { return { isUpdate: Math.random(), } } 再你更新某一个数据之后 再调一次这个参数 this.isUpdate = Math.random();
参考以下链接:https://blog.csdn.net/qq_24950043/article/details/114292940
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!