element Dropdown二级下拉菜单

本文介绍: 开发中经常遇见二级菜单开发，但是element中的Dro p down 下拉菜单 demo 没有二级，所以在此记录一下。此代码适用一级菜单二级菜单。样式需自己重新调整。

开发中经常遇见二级菜单开发，但是el em ent中的Dro p down 下拉菜单 demo 没有二级，所以在此记录一下。

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

效果 如图：

在这里插入图片描述

html 代码

  &lt;div class=" "&gt;
          &lt;el-dropdown
            trigger="click"
            :hide-on-click="false"
            ref="dropdown"
            @command="closeDrop"
          &gt;
            &lt;span class="el-dropdown-link" style="font-size: 22px"&gt; 筛选 </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;
        //调用搜索
        
      }
    },
  }