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会重新渲染插槽内容,并将其更新到对应的位置上。这样就实现了自动更新。

相关推荐
OpenTiny社区13 小时前
TinyRobot:基于 OpenTiny Design 的企业级 AI 交互组件框架
前端·vue.js·ai编程
踩着两条虫13 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(三):核心概念之引擎架构与生命周期
前端·vue.js·ai编程
_Eleven13 小时前
Tiptap 完全使用指南
前端·vue.js·github
进击的尘埃15 小时前
策略模式和状态模式到底啥区别?拿审批流表单说个明白
javascript
专业抄代码选手15 小时前
在react中,TSX是如何转变成JS的
前端·javascript
进击的尘埃15 小时前
SOLID 原则在 React 组件库里怎么落地:五个重构案例
javascript
本末倒置18315 小时前
Bun 内置模块全解析:告别第三方依赖,提升开发效率
前端·javascript·node.js
踩着两条虫15 小时前
AI 驱动的 Vue3 应用开发平台 深入探究(二):核心概念之DSL模式与数据模型
前端·vue.js·ai编程
进击的尘埃16 小时前
中介者模式:把面板之间的蜘蛛网拆干净
javascript
Hilaku16 小时前
OpenClaw 很爆火,但没人敢聊它的权限安全🤷‍♂️
前端·javascript·程序员