el-dropdown-menu如何获取下拉选择的项

el-dropdown-menu 可以通过监听下拉菜单的 select 事件来获取用户选择的项，具体代码如下：

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="item1">选项一</el-dropdown-item>
    <el-dropdown-item command="item2">选项二</el-dropdown-item>
    <el-dropdown-item command="item3">选项三</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(command); // 获取用户选择的项
    }
  }
}
</script>

相关问题

el-dropdown-menu如何点击下拉项时展示该项

的内容？

您可以使用 el-dropdown-menu 的 slot-scope 属性来实现这个功能。具体来说，您可以在 el-dropdown-menu 中添加一个 el-dropdown-item 组件，并将其绑定到一个变量上。然后，您可以在 el-dropdown-menu 的 slot-scope 属性中使用这个变量来控制展示哪个下拉项的内容。例如：

<el-dropdown-menu>
<el-dropdown-item v-for="item in items" :key="item.id" :command="item.id">{{ item.name }}</el-dropdown-item>
<template slot-scope="{ command }">
<div v-if="command">
{{ items.find(item => item.id === command).content }}
</div>
</template>
</el-dropdown-menu>

在这个例子中，我们使用 v-for 指令来循环渲染 el-dropdown-item 组件，并将每个下拉项的 id 绑定到 command 属性上。然后，我们在 el-dropdown-menu 的 slot-scope 属性中使用 command 变量来控制展示哪个下拉项的内容。具体来说，我们使用 v-if 指令来判断 command 是否存在，如果存在，则展示对应下拉项的内容。最后，我们使用 items.find 方法来查找对应下拉项的内容，并将其展示出来。

el-table增加el-dropdown下拉菜单

要在el-table中的每一行增加el-dropdown下拉菜单，可以使用el-table-column的scoped-slot来实现。以下是一个示例代码：

<el-table :data="tableData">
  <el-table-column label="姓名">
    <template slot-scope="scope">
      {{ scope.row.name }}
    </template>
  </el-table-column>
  
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-dropdown>
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click="handleEdit(scope.row)">编辑</el-dropdown-item>
          <el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </el-table-column>
</el-table>

在上面的代码中，我们使用了el-table和el-table-column来创建表格，并在第二个el-table-column中定义了scoped-slot。在这个scoped-slot中，我们使用了el-dropdown来创建下拉菜单，并将其放置在scoped-slot中。在每个下拉菜单项中，我们绑定了不同的点击事件，如handleEdit和handleDelete，来处理对应的操作。

需要注意的是，你需要在Vue实例中定义tableData数据，以便渲染表格，并且在Vue实例中定义handleEdit和handleDelete方法来处理编辑和删除操作。

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有帮助！如果还有其他问题，请继续提问。