表vuejs菜单

Question

因此，我使用的是元素加法表，我想将元素加号表和元素加号菜单结合起来。

​

我想把这种下拉菜单放在我的桌面上。

<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"/>

​

​

但我现在很难把这两个标签结合起来。我发现元素加号表有一个事件@header-click=""，它存储头值等，但我不知道如何使用它来调用element的菜单标记。

我是新来的，所以任何建议都很感激。

答案 @IVOGELOV是正确的。这是我的最后一段代码，我已经做了一些修改，因为时隙范围现在已经被废弃了。

<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>

Answer 1

您可以使用列中的header槽或render-header函数，如这篇中文文章或这个吉特布问题中所解释的那样。

<template>
  <el-table :data="tableData"style="width: 100%">
    <el-table-column prop="name">
      <template slot="header" slot-scope="scope">
        <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>
      </template>
    </el-table-column>
  </el-table>
</template>