element默认展开所有菜单

``@TOC

element默认展开所有菜单

展开菜单用到要在el-menu标签中添加 :default-openeds=“openeds” , openeds是默认展开菜单的el-submenu的index属性的值的集合,是一个数组。
要展开所有一级菜单的话,openeds里就存放所有一级菜单的index。我这里下标用的是路由,所以openeds是这样的。

// 默认展开菜单的下标
openeds: ['/index', '/myMandate', '/commmonFunction'], 

在这里插入图片描述

如果是动态路由,不清楚 index 是什么的话,可以在el-menu里面使用open事件把 index 打印出来

<el-menu
   :default-active="activePath"
   :default-openeds="openeds"
   :collapse="false"
   :collapse-transition="false"
   mode="vertical"
   @open="handleOpen"
 >
handleOpen(index) {
  console.log(index);
},
  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要实现element plus的el-tree懒加载并默认展开二级菜单,你需要按照以下步骤进行: 1. 在el-tree的数据源中,将二级菜单的子节点数据设置为一个空数组,这样就不会在初始化时加载二级菜单的子节点数据。 2. 在每个二级菜单节点上,添加一个属性`lazy`并设置为`true`,表示该节点是懒加载的。 3. 在`load`事件中,判断当前节点是否是懒加载节点,如果是则向后台请求该节点的子节点数据,并将数据添加到该节点的子节点中。 4. 在组件的`mounted`生命周期钩子中,遍历所有的二级菜单节点,并依次调用`load`方法,以触发懒加载并展开二级菜单。 以下是示例代码: ``` <template> <el-tree :data="treeData" :load="load" :default-expand-all="true"></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '一级菜单1', children: [ { label: '二级菜单1', lazy: true, children: [] }, { label: '二级菜单2', lazy: true, children: [] } ] }, { label: '一级菜单2', children: [ { label: '二级菜单3', lazy: true, children: [] }, { label: '二级菜单4', lazy: true, children: [] } ] } ] } }, methods: { load(node, resolve) { if (node.level === 1 && node.lazy) { // 模拟向后台请求子节点数据 setTimeout(() => { const data = [ { label: '三级菜单1' }, { label: '三级菜单2' }, { label: '三级菜单3' } ] node.children = data resolve(data) }, 1000) } else { resolve([]) } } }, mounted() { // 展开所有的二级菜单并触发懒加载 this.$refs.tree.getCheckedNodes().forEach(node => { if (node.level === 1 && node.lazy) { this.$refs.tree.$emit('node-expand', node) } }) } } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值