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

相关推荐
计算机毕设VX:Fegn08955 小时前
计算机毕业设计|基于springboot + vue在线考试系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
C_心欲无痕9 小时前
vue3 - defineExpose暴露给父组件属性和方法
前端·javascript·vue.js·vue3
计算机毕设VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue宠物医院管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
贺今宵10 小时前
安装better-sqlite3报错electron-vite
javascript·sql·sqlite·sqlite3
2501_9444460010 小时前
Flutter&OpenHarmony文件夹管理功能实现
android·javascript·flutter
颜酱13 小时前
滑动窗口详解:原理+分类+场景+模板+例题(视频贼清晰)
javascript
橙某人13 小时前
LogicFlow 交互新体验:让锚点"活"起来,鼠标跟随动效实战!🧲
前端·javascript·vue.js
程序猿的程13 小时前
Stock写给前端的股票行情 SDK: stock-sdk,终于不用再求后端帮忙了
前端·javascript·node.js
用户新13 小时前
V8引擎 精品漫游指南 -解析篇 语法解析 AST 作用域 闭包 字节码 优化 一文通关
前端·javascript
黑土豆13 小时前
2025,我不再写代码,我在当代码的“审核员”
前端·vue.js·ai编程