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

相关推荐
柒儿吖6 分钟前
Electron for 鸿蒙PC 窗口问题完整解决方案
javascript·electron·harmonyos
flashlight_hi33 分钟前
LeetCode 分类刷题:404. 左叶子之和
javascript·算法·leetcode
木易 士心1 小时前
th-table 中 基于双字段计算的表格列展示方案
前端·javascript·angular.js
toooooop82 小时前
uniapp多个页面监听?全局监听uni.$emit/$on
前端·javascript·uni-app
爱泡脚的鸡腿2 小时前
uni-app D4 实战(小兔鲜)
前端·vue.js·架构
星火飞码iFlyCode2 小时前
iFlyCode+SpecKit应用:照片等比智能压缩功能实现
前端·javascript
广白2 小时前
钉钉小程序直传文件到 阿里云OSS
前端·vue.js·uni-app
GISer_Jing3 小时前
3DThreeJS渲染核心架构深度解析
javascript·3d·架构·webgl
摇滚侠3 小时前
Vue 项目实战《尚医通》,完成订单详情静态的搭建,笔记47
vue.js·笔记
拉不动的猪4 小时前
文件下载:后端配置、前端方式与进度监控
前端·javascript·浏览器