首页 > 其他分享 >element ui-Dropdown 下拉菜单使用方法

element ui-Dropdown 下拉菜单使用方法

时间:2022-11-13 18:12:42浏览次数:53  
标签:el dropdown Dropdown element command 下拉菜单

 

直接上代码:

 

dropdown 下拉列表,通常是 <el-dropdown-menu> 组件

 

<template>
  <div>
    <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="a">注销</el-dropdown-item>
        <el-dropdown-item command="b">狮子头</el-dropdown-item>
        <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
        <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script>
export default {
  methods: {
    handleCommand(command) {
      if (command === "a") {
        this.$router.push("/");
        this.$message.success("注销成功");
        localStorage.removeItem("status");
      }
    },
  },
};
</script>

 

command 点击菜单项触发的事件回调 dropdown-item 的指令

 

标签:el,dropdown,Dropdown,element,command,下拉菜单
From: https://www.cnblogs.com/ZhuAo/p/16886464.html

相关文章