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

问题

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

<div>
  <el-table ...>
    <el-table-column ...>
      <template slot="header">
        <div>
          <span @click="phoneView = !phoneView">手机号码</span>
          <span v-if="phoneView">1</span>
          <span v-else>2</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>

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

解决方法

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

<div>
  <el-table ...>
    <el-table-column ...>
      <template #header>
        <div>
          <span @click="phoneView = !phoneView">手机号码</span>
          <span v-if="phoneView">1</span>
          <span v-else>2</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>