el-table中slot=“header“和#header的区别

<el-table>中,自定义表头单元格内容,可以用<templat slot="header">或者<templat #header>插入自定义表头内容,但如果表头中含有变量,比如<template slot="header">{``{name}}</template>当name变量发生改变时,表头中的内容依旧是旧数据,但是当设置为<template #header>{``{name}}</template>时,表头内容可以根据name动态变化,这是为什么

原因

因为vue中会将slot="header"视为静态内容,在编译阶段就就确定其内容。而使用#head是Vue的一种特殊语法,它会将表头内容作为一个动态插槽处理。动态插槽会被Vue处理为响应式的内容,当数据变化时,Vue会重新渲染插槽内容

相关推荐
恋猫de小郭12 小时前
Flutter 2026 Roadmap 发布,未来计划是什么?
android·前端·flutter
时清云12 小时前
2025-年终总结
前端
Esaka_Forever12 小时前
Promise resolve 的基础用法
前端·javascript
a11177612 小时前
卡通风格 UI 组件库html (TRIZ UI Kit [特殊字符])
前端·ui·html
鳄鱼杆12 小时前
虚拟机 | 如何通过域名访问虚拟机中的Web服务?
前端
赵_叶紫13 小时前
Vue 3 从基础到组合式 API 全解析
vue.js
We་ct13 小时前
LeetCode 236. 二叉树的最近公共祖先:两种解法详解(递归+迭代)
前端·数据结构·算法·leetcode·typescript
用泥种荷花13 小时前
【LangChain.js学习】 提示词模板
前端
认真的薛薛14 小时前
2-监控:elk采集各种日志并出图
前端·chrome·elk
hypnos_xy14 小时前
Vue3 工程构建
vue.js·前端框架