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

相关推荐
OpsEye1 小时前
怎么实现大模型的按用户、按应用配额限流?
javascript·ai编程
林恒smileZAZ1 小时前
浏览器为什么加载不了超大图片
前端·vue.js·html5
云舜言传2 小时前
Bloom 手势演示操作 · 录屏指南
javascript·深度学习·机器学习
Highcharts.js5 小时前
BI可视化图表“维护难”问题的解决方案
开发语言·前端·javascript·编辑器·ecmascript·bi·highcharts
Java后端的Ai之路6 小时前
前端技术Vue-13-安装webpack与vuejs
前端·vue.js·webpack
倚窗听花_6 小时前
IIS部署前端Vue项目
前端·javascript·vue.js
yixun_gdas6 小时前
政企网站错敏巡查:错敏都藏在哪些位置?
开发语言·前端·javascript·内容运营
小羊没烦恼!6 小时前
.NET 11 Runtime Async 详解
java·运维·开发语言·javascript·python
飞飞鱼在摸鱼7 小时前
前端转Agent开发 | JavaScript 从 0 到 1 完全指南
前端·javascript
Suprman7 小时前
从 B/S 到 Electron:平面排版套料系统桌面版开发实战
javascript·平面·electron·排序算法