表Vuejs中的菜单

Question

因此，我正在使用Element Plus Table，我想组合元素加上表和元素以及菜单IE

我希望在桌子标题中使用这种下拉菜单。

<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 =“”存储标题值等。

我是Vue的新手，因此对任何建议都表示赞赏。

答案 @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

您可以在列中使用标题插槽或render-header函数，如此中文文章“ nofollow noreferrer”>这个github问题。

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