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会重新渲染插槽内容

相关推荐
用户059540174462 小时前
把AI聊天机器人记忆存储测试从3小时压到5分钟,我用Pytest + Docker搭了一套自动化回归
前端·css
明月_清风2 小时前
显存即正义:不同显存容量能训多大的模型?一文说清硬件边界与训练策略
前端·后端·ai编程
weixin_BYSJ19872 小时前
【java项目分享】springboot阅读推荐平台10600
java·javascript·spring boot·python·django·flask·php
Sterting3 小时前
第 9 节:本地存储 — 数据不丢的前端缓存
前端·javascript·缓存
IT_陈寒3 小时前
Vite的HMR在我项目上突然失效,排查三天找到离谱原因
前端·人工智能·后端
人间凡尔赛3 小时前
React Compiler 1.0 正式落地:告别 useMemo / useCallback,2026 前端性能优化的新范式
前端·性能优化·react
灵析表格3 小时前
灵析表格功能函数深度分析报告
前端·数据库·microsoft
Data_Journal3 小时前
掌握网页抓取中的分页:完整指南
java·服务器·前端
breeze jiang3 小时前
React useRef + Web Worker:避免大计算阻塞页面的通信方案
前端·javascript·react.js