element Dropdown二级下拉菜单

最新推荐文章于 2025-04-25 19:15:00 发布

小白菜S

最新推荐文章于 2025-04-25 19:15:00 发布

阅读量3k

点赞数 2

文章标签： vue.js 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_38923162/article/details/129545178

版权

该文章介绍了如何在Vue.js项目中使用ElementUI库创建具有二级菜单的下拉菜单。通过HTML和Vue.js的数据绑定及事件处理，实现了点击筛选按钮后展示可选的一级和二级菜单项，并提供了关闭下拉框的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发中经常遇见二级菜单开发，但是element中的Dropdown下拉菜单demo没有二级，所以在此记录一下。

此代码适用一级菜单二级菜单。样式需自己重新调整。

效果如图：

在这里插入图片描述

html 代码

  <div class=" ">
          <el-dropdown
            trigger="click"
            :hide-on-click="false"
            ref="dropdown"
            @command="closeDrop"
          >
            <span class="el-dropdown-link" style="font-size: 22px"> 筛选 </span>
            <el-dropdown-menu
              slot="dropdown"
              :append-to-body="false"
              class="lang-select-dropdown"
            >
              <template v-for="item in menu">
                <el-dropdown-item v-if="!item.childer" :command="item.value">{{
                  item.title
                }}</el-dropdown-item>
                <el-dropdown-item v-else>
                  <el-dropdown
                    :visible-arrow="false"
                    width="200px"
                    offset="100"
                    @command="closeDrop"
                  >
                    <span class="el-dropdown-link">
                      {{ item.title }}
                    </span>
                    <el-dropdown-menu
                      :visible-arrow="false"
                      class="lang-select-dropdown-chidren"
                      slot="dropdown"
                      :append-to-body="false"
                      style="width: 100px"
                    >
                      <template v-for="items in item.childer">
                        <el-dropdown-item :command="items.value">{{
                          items.title
                        }}</el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

vue代码：

  data() {
    return {
     page: {
        pay: "", //类型
      },
      menu: [
        {
          title: "收款方式",
          childer: [
            {
              title: "对公",
              value: "1",
            },
            {
              title: "支付宝",
              value: "2",
            },
            {
              title: "微信",
              value: "3",
            },
          ],
        },
        {
          title: "男",
          value: "4",
        },
      ],
    };
  },
  methods: {
  	 closeDrop(command) {//点击关闭下拉框
      this.$refs.dropdown.hide(); // 隐藏
      if (undefined != command) {//有子集是点击父级无需触发
        this.page.pay = command;
        //调用搜索
        
      }
    },
  }