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

相关推荐
麦麦大数据15 分钟前
F051-vue+flask企业债务舆情风险预测分析系统
前端·vue.js·人工智能·flask·知识图谱·企业信息·债务分析
1024肥宅17 分钟前
现代 JavaScript 特性:ES6+ 新特性深度解析与实践
前端·javascript·面试
速易达网络26 分钟前
基于Java Servlet的用户登录系统设计与实现
java·前端·mvc
晨光321143 分钟前
Day34 模块与包的导入
java·前端·python
BD_Marathon1 小时前
Vue3_关于CSS样式的导入方式
前端·css
苹果电脑的鑫鑫1 小时前
vue和react缩进规则的配置项如何配置
前端·vue.js·react.js
BD_Marathon1 小时前
Vue3_工程文件之间的关系
前端·javascript·vue.js
weibkreuz1 小时前
模块与组件、模块化与组件化的理解@3
开发语言·前端·javascript
拾忆,想起1 小时前
单例模式深度解析:如何确保一个类只有一个实例
前端·javascript·python·微服务·单例模式·性能优化·dubbo
RealizeInnerSelf丶1 小时前
Web 网页如何唤起本地 Windows 应用并传递参数(含 Electron 自动注册 + 手动配置指南)
前端·windows