el-table如何与菜单联动

在el-table中与菜单联动，可以通过以下步骤实现：

1. 在el-table中定义一个列，用来显示菜单按钮。

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="text" @click.stop="handleMenu(scope.row)">菜单</el-button>
  </template>
</el-table-column>

2. 在data中定义菜单列表数据。

data() {
  return {
    menuList: [
      { label: '编辑', icon: 'el-icon-edit' },
      { label: '删除', icon: 'el-icon-delete' }
    ]
  }
}

3. 在methods中定义处理菜单点击事件的方法。

methods: {
  handleMenu(row) {
    this.menuVisible = true;
    this.menuPosition = { x: event.clientX, y: event.clientY };
    this.currentRow = row;
  }
}

4. 在el-dropdown中使用菜单列表数据。

<el-dropdown v-model="menuVisible" :hide-on-click="false" :placement="'bottom-end'" :style="{ position: 'fixed', left: menuPosition.x + 'px', top: menuPosition.y + 'px' }">
  <el-dropdown-menu>
    <el-dropdown-item v-for="menu in menuList" :key="menu.label" :command="menu.label" icon-class="menu.icon">
      {{ menu.label }}
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

5. 在methods中定义处理菜单命令的方法。

methods: {
  handleCommand(command) {
    switch (command) {
      case '编辑':
        this.editRow(this.currentRow);
        break;
      case '删除':
        this.deleteRow(this.currentRow);
        break;
    }
    this.menuVisible = false;
  },
  editRow(row) {
    // 编辑行数据
  },
  deleteRow(row) {
    // 删除行数据
  }
}

这样，当用户点击菜单按钮时，菜单列表会显示在按钮下方，用户选择菜单项后，会触发相应的命令处理方法，从而实现el-table与菜单的联动。