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

相关推荐
和和和1 分钟前
🗣️面试官: 那些常见的前端面试场景问题
前端·javascript·面试
lxp1997412 分钟前
vue笔记摘要-更新中
前端·vue.js·笔记
Oriental3 分钟前
URL解码踩坑记录
前端·后端
IT教程资源C3 分钟前
(N_135)基于springboot,vue高校图书馆管理系统
vue.js·spring boot·后端
San3020 分钟前
ES6+ 新特性解析:让 JavaScript 开发更优雅高效
前端·javascript·ecmascript 6
Heo25 分钟前
简单聊聊webpack摇树的原理
前端·javascript·面试
San3026 分钟前
深入理解 JavaScript 异步编程:从 Ajax 到 Promise
javascript·ajax·promise
少卿30 分钟前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮1 小时前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮1 小时前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码