renderHeader的表头数据变化时，表头不会重新渲染问题的解决方法

[qq2267222680]

场景：我想要些一个渲染在表头中的下拉菜单，用于控制表中各列的显示。（下拉菜单中采用文字+switch按钮）

方法1：将renderHeader更换为slot="header"的方式，并添加:key="Math.random()"。！！！但是该方法重新渲染会将下拉菜单收回，而我想要保持显示。！！！

<el-table-column :key="Math.random()">
  <template slot="header">
    <el-dropdown trigger="click" :hide-on-click="false">
      <el-button icon="el-icon-setting" type="text" />
      <el-dropdown-menu slot="dropdown" style="width: 240px">
        <el-dropdown-item v-for="col of cols" :key="col.name" style="position: relative">
          {{ col.label }}
          <el-switch v-model="tempValue" active-color="#13ce66" style="position:absolute; right:0; top: 8px" />
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </template>
</el-table-column>

加key的方法来自CSDN老哥“新津之虎--曹达华”的文章：https://blog.csdn.net/Admin_yws/article/details/111572887

方法2：将slot="header"改为#header。

<template #header>

该方法来自CSDN老哥“找不到的二蛋”的文章：https://blog.csdn.net/ITk_Programmer/article/details/122216651

解法3：调用table的doLayout()函数

  beforeUpdate() {
    this.$nextTick(() => { // 重新渲染表格，防止后渲染而出现格式抖动
      this.$refs['table'].doLayout()
    })
  }

该方法还能解决表格列动态显示（新增或移除）时的抖动问题，因此推荐第三种方法。

[qq2267222680]

网络问题导致发重复成两条了，见谅