antd-vue菜单选中

antd-vue菜单选中

进入antd-vue的官网，我们可以直接在导航菜单组件参考文档中找到所有的答案，剩下的只是用我们的逻辑思维把官方提供的API文档串起来即可！

1.关于菜单选中

1.属性配置

2.事件配置

一般存在的需求：
1.登录成功，自动选中默认的菜单
1.点击菜单，选中对应的菜单
2.由路径直接访问，选中对应的菜单

具体实现：
对于第一种需求，直接使用属性defaultSelectedKeys即可，比如：:defaultSelectedKeys="['/index/home']

对于第二种需求，给菜单组件添加click事件，点击选中的时候，获取点击的路径，把当前被点击的路径赋值给配置好的selectedKeys(v-model)属性即可，比如：

属性配置：

:selected-keys="[current]"

vue的data配置：

data() {
      return {
        current:'/index/home'
      };
    },

事件函数：

 handleClick(e) {
        this.current = e.keyPath[0];
      },

对于第三种需求，只需要在获取菜单数据的时候，使用this.$route.path获取当前的路径，然后直接赋值给current即可，比如：

属性配置：

:selected-keys="[current]"

vue的data配置：

data() {
      return {
        current:'/index/home'
      };
    },

获取菜单的函数：

getMenuList() {
				this.$apis.common.getMenu()
					.then(res => {
            this.menuList = res.data
           this.current = this.$route.path
					})
			}

vue是数据驱动视图的，所以就这么简单就可以实现了，以上只是个人的一种思路，希望可以留作一种参考，本人也刚接触vue及ES6语法，如有不足的，望各位大佬指正。万分感谢！

antd-vue菜单展开的思路类似，这里就不做赘述！