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

相关推荐
吃阿茶搽43 分钟前
源码剖析:Standard组件架构与底层实现原理
javascript
卤蛋fg61 小时前
给 vxe-table 设置全局默认参数:setConfig、setIcon 与 setTheme
vue.js
WebInfra1 小时前
TanStack Start 框架正式支持 Rsbuild
前端·javascript·前端框架
TrisighT1 小时前
uni-app鸿蒙原生应用开发实战(下):核心功能实现与技术细节
vue.js·harmonyos
竹林8181 小时前
被合约事件搞到失眠?我踩了三天坑,终于写出一份监听智能合约事件的实战指南
前端·javascript
在逃花果山的小松1 小时前
容器化部署实战:从Dockerfile到Kubernetes上云
javascript
艾利克斯冰2 小时前
TypeScript 静态类型入门教程:可选静态类型与类型推导详
前端·javascript·typescript
GuWenyue2 小时前
告别命名混乱!5步掌握BEM规范,写出易维护的前端页面
前端·javascript·面试
无心使然2 小时前
Openlayers图层按需分层渲染到不同Canvas画布
前端·vue.js·gis