美文网首页
iview左侧导航实现

iview左侧导航实现

作者: 踩着阳光 | 来源:发表于2020-02-06 11:57 被阅读0次

    1、二级菜单name如果相同,选中二级菜单后,其他一级菜单中的二级菜单也会被选中,name要定义不同参数
    {name: "android-yk", value: "一课"}
    {name: "ios-yk", value: "一课"}
    2、获取选中导航name值
    iview自带on-select 和 on-open-change事件
    3、动态生成open-names或active-name时不生效
    运用Menu的updateopened方法:手动更新展开的子目录,注意要在 $nextTick 里调用。对openNames添加watch

    <Sider
                  :style="{width: '140px','min-width': '207px','max-width': '207px',left: 0, overflow: 'auto',background: '#fff'}"
                  hide-trigger
                >
                  <Row>
                    <Col span="8">
                      <Menu
                        :style="{width: '190px'}"
                        ref="side_menu"
                        accordion
                        :active-name="isShow"
                        @on-open-change="navParent"
                        @on-select="navChild"
                        :open-names="openNames"
                      >
                        <Submenu :name="item.name" v-for="(item,index) in this.navItems" :key="index">
                          <template slot="title">
                            <Icon :type="item.icon" />
                            {{item.value}}
                          </template>
                          <MenuItem
                            v-for="(item1) in item.childs"
                            :key="item1.index"
                            :name="item1.name"
                          >{{item1.value}}</MenuItem>
                        </Submenu>
                      </Menu>
                    </Col>
                  </Row>
                </Sider>
    
    watch: {
        openNames() {
          this.$nextTick(() => {
            this.$refs.side_menu.updateOpened();
            this.$refs.side_menu.updateActiveName();
          });
        }
      },
    

    相关文章

      网友评论

          本文标题:iview左侧导航实现

          本文链接:https://www.haomeiwen.com/subject/slbyxhtx.html