elementui中表头中使用下拉菜单组件并使用v-if控制列的显示与否，导致渲染出两个相同的下拉菜单

问题

做项目过程中，有一个这样的需求，表头有下拉菜单进行数据筛选，同时该列会在某种条件下才触发的显示。如下：类型选择数据库资源时，数据库资源类型这一列才会显示，但是实际做出来之后，就是下面这样，很明显的渲染出了两个相同的下拉菜单，错位也是很严重

网上百度居然没有人没有相关的问题。。。

于是尝试了很多办法，

加上key试了一下不行！

行内样式用display控制列的显示与否，结果导致了其他列出现了异常，尤其是操作列，居然不显示了？

又尝试了替换成别的组件，换了表格自带的表头筛选方法等，但是又导致出现了别的很多问题。。。

......

试了一圈回来，发现还是用下拉菜单组件问题最小，可能是因为我很早就把这块的样式逻辑什么的调好了，现在回头再改起来改动比较大的原因吧。。。。

然后我只能再用这个组件试一下最后一个我能想到的最不推荐的方式试一下啦！

就是在这个下拉框渲染出来之后，手动将多出来的下拉菜单隐藏掉。。。

解决思路

使用下拉菜单组件自带的监听下拉显示/隐藏的事件@visible-change="dbTypeDropDownVisible"

<el-table-column
  v-if="dbType"
  prop="dbTypeName"
  key="dbType" 
  min-width="200">
  <template slot="header">
    <el-dropdown trigger="click" ref="dbThyeDropDown" size="small" @command="dbTypeChange" @visible-change="dbTypeDropDownVisible"> 
      <span style="color:#108ee9;white-space: nowrap;">
        <span>数据库资源类型({{renderTableHeader('dbType')}})</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in dbTypeData" :key="item.value" :command="item.value">
        {{item.text}}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </template>
/el-table-column>

 data中放置一个dbTypeDropDownIndex变量，用来在下拉菜单显示/隐藏事件中计数（这里我测试了一下，渲染出来的两个下拉菜单，会触发两次visible-change事件）。

菜单显示之后，检查是第几个了，如果不是第一个，就隐藏掉，因为我们只需要它显示一个就行了

data(){
  return {
    .......
    dbTypeDropDownIndex: 0
  }
}
.....
dbTypeDropDownVisible(visible){
  if(visible){
    this.dbTypeDropDownIndex++
    if(this.dbTypeDropDownIndex > 1){
      // 多出来的元素隐藏掉
      this.$refs.dbThyeDropDown.hide()
    }
  }else{
    this.dbTypeDropDownIndex = 0
  }
}

总结一下整体的思路：下拉菜单出现/隐藏时触发函数，函数中发现渲染多了，将多出来的元素隐藏掉

看一下效果：

2022/9/14

新的思路：更新下写法，将slot写法更新成#写法, 如：<template slot="header">修改成<template #header>