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

相关推荐
可乐鸡翅yeah_1 小时前
hls.js 切换多个视频源,新手开发常见踩坑
开发语言·前端·javascript·ios·ffmpeg·音视频·safari
kyriewen1 小时前
我实测了前端日期的 5 个坑:差 8 小时只是开始
前端·javascript·程序员
anew___1 小时前
《从零手写操作系统 (11):文件系统初探——initrd与VFS抽象层》
java·javascript·算法
今年下半年2 小时前
【VUE3】移动端:使用腾讯地图显示区域统计与放大显示资产点位
javascript·前端框架·vue·地图
a努力。2 小时前
LangChain Agent消息链路全解析
java·前端·javascript
今年下半年2 小时前
【前端】ant-design-vue 表格「行、列都动态」的处理方案
前端·javascript·vue.js
默_笙3 小时前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript
志尊宝4 小时前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
ym hyd 1114 小时前
慢性病精细化管理平台源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·毕设
wangyadong3174 小时前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js