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

相关推荐
十里-4 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季6665 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
雨季6665 小时前
Flutter 三端应用实战:OpenHarmony 简易倒序文本查看器开发指南
开发语言·javascript·flutter·ui
小北方城市网5 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')5 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_892000525 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马37985 小时前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上10246 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js
qx096 小时前
esm模块与commonjs模块相互调用的方法
开发语言·前端·javascript
摘星编程7 小时前
在OpenHarmony上用React Native:SectionList吸顶分组标题
javascript·react native·react.js