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

相关推荐
liyi_hz20086 小时前
O2OA(翱途) V10.1 即将发布|功能再升级,安全再加固,协同更高效!
java·javascript·windows·开源软件
apollo_qwe7 小时前
大模型 API 接通了,AI 聊天页面为什么还是不好用?
前端·vue.js·人工智能
志尊宝8 小时前
AI原生前端开发(029):AI辅助的文档自动生成
javascript·人工智能·ai-native
一个游离的指针8 小时前
ES6新特性:let、const、块级作用域
开发语言·javascript·es6
Hilaku9 小时前
删了一个没用的 console.log,生产环境直接崩了!
前端·javascript·程序员
真上帝的左手9 小时前
2. 编程语言-JavaScript
开发语言·javascript
2601_949847759 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
zyseo89 小时前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
Oiiouui9 小时前
关于 Logto 登录系统的体验以及建议
javascript·安全·react
richdata10 小时前
从采购承诺到库存周转:降低库存资金占用的六个计划杠杆
大数据·前端·javascript