el-table自定义表头数据不更新

我的表头是有三层的,中间一层展示对应的数据,所以需要自定义,官方的文档显示的写法如下:

复制代码
<el-table-column>
  <template slot="header">
    <div>{{dayData.supply}}、{{dayData.use}}</div>
  </template>
<el-table-column>

显示是显示出来了,但是数据是最开始默认的,不会更新,后来我搜索到方法,说讲将slot="header" 改成#header,改了之后的确可以显示了。

复制代码
<el-table-column>
  <template #header>
    <div>{{dayData.supply}}、{{dayData.use}}</div>
  </template>
<el-table-column>

但是为什么会出现这个情况呢:原来是Vue在编译模板时,会对静态内容进行优化,将其提升为静态渲染,以提高性能。当我们用slot="header"来定义表头时,Vue会将其视为静态内容,不会进行响应式更新。而使用#header的方式,会将表头内容作为一个动态插槽处理。动态插槽会被Vue处理为响应式的内容,当数据变化时,Vue会重新渲染插槽内容,并将其更新到对应的位置上。这样就实现了自动更新。

相关推荐
之歆26 分钟前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
Maimai108081 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
candyTong1 小时前
Claude Code 的 Edit 工具是怎么工作的
javascript·后端·架构
卡卡军4 小时前
agmd 1.0 重磅升级——Rust 重写,性能起飞
javascript·rust
Larcher4 小时前
🔥 告别抓瞎:用 Claude Code (cc) 优雅接手与维护已有项目
javascript·机器学习·前端框架
JYeontu4 小时前
轮播图不够惊艳?试下这个立体卡片轮播图
前端·javascript·css
亲亲小宝宝鸭4 小时前
如何监听DOM尺寸的变化?element-resize-detector 和 resizeObserver
前端·javascript
代码煮茶4 小时前
Vite 5.0 新特性深度解析:更快、更干净、更未来的前端构建利器
vue.js
卷帘依旧7 小时前
Generator 全面解析 + async/await 深度对比
前端·javascript
weixin_471383037 小时前
统一缩放单位基础(px、em、rem)
开发语言·javascript·ecmascript