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