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

相关推荐
发现一只大呆瓜2 分钟前
Vue2:数组/对象操作避坑大全
前端·vue.js·面试
发现一只大呆瓜4 分钟前
Vue3:ref 与 reactive 超全对比
前端·vue.js·面试
程序猿大波1 小时前
基于java,SpringBoot和Vue餐饮公司食堂管理系统设计
java·vue.js·spring boot
swipe1 小时前
JavaScript 对象操作进阶:从属性描述符到对象创建模式
前端·javascript·面试
前端小趴菜052 小时前
vue3项目优化方案
前端·javascript·vue.js
Irene19913 小时前
对比总结:Vue3中的 watch 和 Pinia中的 $subscribe
vue.js·pinia·watch·subscribe
Luna-player4 小时前
gitee上的vue项目,刚刚创建了一个分支,怎么在本地上拉取分支项目
前端·vue.js·gitee
徐小夕4 小时前
借助AI,1周,0后端成本,我开源了一款Office预览SDK
前端·vue.js·github
还是大剑师兰特4 小时前
Vue3 按钮切换示例(启动 / 关闭互斥显示)
开发语言·javascript·vue.js
小金鱼Y4 小时前
从进程线程到 async/await,一文吃透前端异步核心原理
前端·javascript