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

相关推荐
周淳APP几秒前
【React Hook全家桶】大致过一遍React Hooks
前端·javascript·react.js·前端框架·react hooks
●VON4 分钟前
Flutter组件深度解析:从基础到高级的完整指南
android·javascript·flutter·harmonyos·von
xuankuxiaoyao10 分钟前
VUE.JS 实践 第三章
前端·javascript·vue.js
تچ快乐杂货店يچ14 分钟前
基于前后端分离的在线考试系统(微服务架构 + RBAC权限 + AI助手)
java·vue.js·spring boot·spring cloud·微服务·架构·typescript
工程师老罗26 分钟前
lvgl有哪些布局?
前端·javascript·html
木子清billy38 分钟前
物联网浏览器(IoTBrowser)-js开发人脸识别
开发语言·javascript·物联网
关中老四40 分钟前
【原生JS甘特图MZGantt 】如何给父任务设置独立进度条
前端·javascript·甘特图
xiegwei42 分钟前
android Compose 图片星星评分组件
android·前端·elementui
Irene199144 分钟前
ES13 # 私有字段( Private Fields) 语法:在类中定义真正的私有属性
javascript·私有字段
WiChP1 小时前
【V0.1B4】从零开始的2D游戏引擎开发之路
前端·javascript·游戏引擎