当前位置: 首页>前端>正文

iview左侧导航实现

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();
      });
    }
  },

https://www.xamrdz.com/web/25z1994958.html

相关文章: