Element: [Bug Report] Collapsable NavMenu No Eeffect

Created on 5 Aug 2017  ·  2Comments  ·  Source: ElemeFE/element

Element UI version

1.4.1

OS/Browsers version

Safari 10.1.1

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/v1nzdtwb/

Steps to reproduce

<template>
  <div class="wrapper">
    <!-- CONTROLLER BTNs -->
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">Open</el-radio-button>
      <el-radio-button :label="true">Close</el-radio-button>
    </el-radio-group>

    <!-- MENUS -->
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-message"></i>
          <span slot="title">Menu One</span>
        </template>
        <el-menu-item-group>
          <span slot="title">Group One</span>
          <el-menu-item index="1-1">Opt 1</el-menu-item>
          <el-menu-item index="1-2">Opt 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group Two">
          <el-menu-item index="1-3">Opt 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">Opt 4</span>
          <el-menu-item index="1-4-1">Opt 4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">Menu Two</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">Menu Three</span>
      </el-menu-item>
    </el-menu>
</div>
</template>

<script>
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        isCollapse: false
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

What is Expected?

I want the menu that I created can be collapsable

What is actually happening?

I has created a collapsable navMenu via following the Documents in ElementUI official website, but there was no effect. Did I code wrong or missed something?
I am Chinese,So If u r as well as me, can just speak Chinese la~!!!

Most helpful comment

大概率是 Element 版本不对,请在你的项目下执行 npm ls element-ui,确保 Element 的版本是 1.4.0 以上。

All 2 comments

Hi, your JSFiddle page is blank because it seems you forgot to click the Save button. Please save your fiddle and then edit this issue with the new link.

大概率是 Element 版本不对,请在你的项目下执行 npm ls element-ui,确保 Element 的版本是 1.4.0 以上。

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mochenxm picture mochenxm  ·  3Comments

smallpath picture smallpath  ·  3Comments

fscardua picture fscardua  ·  3Comments

FranzSkuffka picture FranzSkuffka  ·  3Comments

chenzhe-pro picture chenzhe-pro  ·  3Comments