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

相关推荐
GIS好难学12 分钟前
2025年华中农业大学暑期实训优秀作品(5):智慧煤仓监控系统平台——重塑煤炭仓储管理新模式
前端·vue.js·信息可视化·gis开发·webgis
pixle021 分钟前
从零学习Node.js框架Koa 【七】Koa实战:构建企业级邮箱验证注册系统
javascript·学习·node.js·koa·注册·全栈·邮箱注册
小明记账簿40 分钟前
解锁前端新技能:让JavaScript与CSS变量共舞
前端·javascript·css
古韵1 小时前
如何从Axios平滑迁移到Alova
vue.js·react.js·node.js
WYiQIU1 小时前
突破字节前端2-1⾯试: JS异步编程问题应答范式及进阶(视频教学及完整源码笔记)
开发语言·前端·javascript·vue.js·笔记·面试·github
爱上妖精的尾巴2 小时前
5-40 WPS JS宏 综合实例应用-5(求字符串中的最大值记录)
开发语言·前端·javascript·wps·js宏·jsa
小胖霞2 小时前
从生活实例解释什么是AST抽象语法树
vue.js
岛风风2 小时前
前端HTML导出PDF分页难题:10天踩坑后的终极方案,精细到每个像素点!!!
前端·javascript
alanAltman2 小时前
前端架构范式:意图系统构建web
前端·javascript
梦鱼2 小时前
我踩了 72 小时的 Electron webview PDF 灰色坑,只为告诉你:别写这行代码!
前端·javascript·electron