Vue实现element默认展开和选中

Question

如题所述

Answer 1

vue组件中添加Element-UI

进入项目，打开终端执行：
npm i element-ui -S

在main.js中引用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

项目中的使用：
效果一，实现默认展开一级目录-行业聚焦：

template：

script和style：

效果二，实现默认展开天下大势，并选中国际新闻：

修改<el-menu :default-openeds="['4']" active-text-color="#00C0FF">为
<el-menu :default-active="defaultActive" active-text-color="#00C0FF">
defaultActive的赋值在onLoad()中

注意：如果点击一级目录需要响应事件，可以使用@click.native，添加后点击下级目录会响应本级及以上的所有点击事件