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

相关推荐
久亮哦几秒前
开发Electron程序
前端·javascript·electron
敲敲了个代码3 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
你们的前端课代表4 分钟前
前端如何优雅地“边聊边等”——用 Fetch 实现流式请求大模型
前端
王大宇_5 分钟前
React闭包陷阱
前端·javascript
A达峰绮17 分钟前
Actix-web 框架性能优化技巧深度解析
前端·性能优化·actix-web
小白学过的代码21 分钟前
videojs增加视频源选择框小工具
javascript·vue.js·音视频
Promise52031 分钟前
用油猴脚本实现用户身份快速切换
前端·javascript
玲玲51232 分钟前
vue3组件通信:defineEmits和defineModel
前端
温柔532939 分钟前
仓颉语言异常捕获机制深度解析
java·服务器·前端
温宇飞1 小时前
ECS 系统的一种简单 TS 实现
前端