Vue使用Element Plus实现表格表头嵌入下拉菜单

Vue项目中使用Element Plus组件库时，需要将el-menu下拉菜单嵌入el-table表头位置，实现表头点击展开下拉选项的交互效果。

现有基础代码 #

初始菜单组件代码 #

<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-sub-menu index="1">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>

初始表格组件代码 #

<el-table :data="filtered"  border style="width: 100%" height="500" @selection-change="handleSelectionChange" @header-click="contextmenu">
  <el-table-column type="selection" width="55"/>
  <el-table-column  fixed align="center" v-for="col in columns" :prop="col.field" :label="col.field" :key="col.field"/>

整合卡点：已知el-table提供@header-click事件可以拿到表头点击的相关数据，但不知道如何通过该事件唤起挂载的el-menu组件。 #

不需要手动监听表头点击事件控制菜单显隐，直接利用el-table-column提供的#header具名插槽，把菜单组件直接嵌入表头位置即可实现需求。
注意：旧版slot-scope语法已废弃，直接使用Vue3标准插槽写法即可，无需额外传参。
最终可运行代码如下：

<el-table :data="filtered"  border style="width: 100%" height="500" @selection-change="handleSelectionChange" @header-click="contextmenu" >
  <el-table-column type="selection" width="55"/>
  <el-table-column  fixed align="center"  v-for="col in columns" :prop="col.field" :label="col.field" :key="col.field">
    <template #header >
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect">
        <el-sub-menu index="1">
          <template #title>{{col.field}}</template>
          <el-menu-item index="2-1">Source</el-menu-item>
          <el-menu-item index="2-2">Target</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </template>  
  </el-table-column>
</el-table>

适配调整提示 #

• 可根据业务需求自由调整菜单的嵌套层级、菜单项文本，在handleSelect方法中编写对应选项的选中逻辑即可
• 如果默认菜单样式和表格表头样式存在对齐偏差，可通过自定义el-menu-demo类的CSS属性调整高度、内边距，和原生表头样式保持一致
• 如果不需要所有列都显示下拉菜单，只需要给对应需要菜单的列单独配置#header插槽即可，不需要在v-for循环中统一配置

内容的提问来源于stack exchange，提问作者harsh panday