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

相关推荐
晚霞的不甘8 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架
weixin79893765432...8 小时前
Vue 渲染体系“三件套”(template 模板语法、h 函数和 JSX 语法)
vue.js·h函数·template 模板·jsx 语法
xkxnq8 小时前
第五阶段:Vue3核心深度深挖(第74天)(Vue3计算属性进阶)
前端·javascript·vue.js
三小河8 小时前
Agent Skill与Rules的区别——以Cursor为例
前端·javascript·后端
Hilaku9 小时前
不要在简历上写精通 Vue3?来自面试官的真实劝退
前端·javascript·vue.js
三小河9 小时前
前端视角详解 Agent Skill
前端·javascript·后端
Aniugel9 小时前
单点登录(SSO)系统
前端
颜酱9 小时前
二叉树遍历思维实战
javascript·后端·算法
鹏多多9 小时前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
serioyaoyao9 小时前
上万级文件一起可视化,怎么办?答案是基于 ParaView 的远程可视化
前端