element的el-table组件，在插槽slot=“header“内，数据不更新的问题

问题

在父组件中定义一个属性，如phoneView: false，在element的el-table组件header插槽内，使用这个属性来做一些逻辑处理，如下代码：

 1 <div>
 2   <el-table ...>
 3     <el-table-column ...>
 4       <template slot="header">
 5         <div>
 6           <span @click="phoneView = !phoneView">手机号码</span>
 7           <span v-if="phoneView">1</span>
 8           <span v-else>2</span>
 9         </div>
10       </template>
11     </el-table-column>
12   </el-table>
13 </div>

在点击事件修改phoneView的值之后，发现渲染的dom并没有修改。经过多次测试，发现在slot内部phoneView的值并没有改变，或者说改变后，又变回去了

解决方法

将slot="header"改成#header就可以了，如：

 1 <div>
 2   <el-table ...>
 3     <el-table-column ...>
 4       <template #header>
 5         <div>
 6           <span @click="phoneView = !phoneView">手机号码</span>
 7           <span v-if="phoneView">1</span>
 8           <span v-else>2</span>
 9         </div>
10       </template>
11     </el-table-column>
12   </el-table>
13 </div>