el-table自定义表头数据不更新

devtools/2024/9/22 10:53:12/

      我的表头是有三层的,中间一层展示对应的数据,所以需要自定义,官方的文档显示的写法如下:

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


http://www.ppmy.cn/devtools/42581.html

相关文章

多电脑共享鼠标键盘

由于要在两个电脑之间共用一套鼠标键盘&#xff0c;所以在此记录一下。 mouse without borders Mouse without Borders 是一款免费的 Windows 工具&#xff0c;允许你在多台电脑之间共享鼠标和键盘。 安装与配置步骤 下载和安装&#xff1a; 前往 Mouse without Borders 官…

肯尼亚大坝决堤反思:强化大坝安全监测的必要性

一、背景介绍 近日&#xff0c;肯尼亚发生了一起严重的大坝决堤事件。当地时间4月29日&#xff0c;肯尼亚内罗毕以北的一座大坝决堤&#xff0c;冲毁房屋和车辆。当地官员称&#xff0c;事故遇难人数已升至71人。这起事件再次提醒我们&#xff0c;大坝安全无小事&#xff0c;监…

Git命令汇总

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

目前流行的前端框架有哪些?

目前流行的前端框架有很多&#xff0c;它们可以帮助开发者快速构建高质量的前端应用程序。本文将介绍一些目前比较受欢迎的前端框架&#xff0c;并分析它们的优缺点。 React React 是一个由 Facebook 开发的开源前端JavaScript库&#xff0c;用于构建用户界面&#xff0c;尤其…

基于Java的连连看游戏设计与实现

【免费】基于Java的连连看游戏设计与实现.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89321449 基于Java的连连看游戏设计与实现 摘 要 连连看是一种消除类益智游戏&#xff0c;核心要求是在规定的时间内&#xff0c;消除游戏界面中选中的两张相同的图案&…

C++ 基本语法

C 程序可以定义为对象的集合&#xff0c;这些对象通过调用彼此的方法进行交互。现在让我们简要地看一下什么是类、对象&#xff0c;方法、即时变量。 对象 - 对象具有状态和行为。例如&#xff1a;一只狗的状态 - 颜色、名称、品种&#xff0c;行为 - 摇动、叫唤、吃。对象是类…

【高阶数据结构】跳表

文章目录 跳表1. 什么是跳表-skiplist2. skiplist的效率如何保证&#xff1f;3.skiplist的实现4.skiplist跟平衡搜索树和哈希表的对比 跳表 1. 什么是跳表-skiplist skiplist本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树和哈希表的价…

[STM32-HAL库]AS608-指纹识别模块-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C8T6

目录 一、前言 二、详细步骤 1.光学指纹模块 2.配置STM32CUBEMX 3.程序设计 3.1 输出重定向 3.2 导入AS608库 3.3 更改端口宏定义 3.4 添加中断处理部分 3.5 初始化AS608 3.6 函数总览 3.7 录入指纹 3.8 验证指纹 3.9 删除指纹 3.10 清空指纹库 三、总结及资源 一、前言 …