elementplus 树表格只展开第一级下所有节点

在Element Plus中,若要实现树形表格只展开第一级下的所有节点,可以通过使用:ml-search[default-expanded-keys]属性来实现。这个属性允许指定哪些节点在组件加载时应该默认展开。通过遍历树数据,你可以获取每个节点的ID,并将这些ID添加到default-expanded-keys数组中,从而控制哪些节点在初始化时是展开的。

通过以下步骤实现这一功能:

  1. 遍历树数据‌:首先,你需要遍历整个树形数据,找到所有第一级节点的ID。
  2. 设置default-expanded-keys‌:将第一步中找到的节点ID添加到default-expanded-keys属性中。这个属性是一个数组,包含了所有应该默认展开的节点的键值。

树形数据结构类似于这样 :

const treeData = [
  { id: 1, name: '节点1', children: [...] },
  { id: 2, name: '节点2', children: [...] },
  // ...
];

通过遍历这个数组,找到所有顶级节点的ID,并将它们添加到default-expanded-keys中:

let topLevelNodes = []; // 用于存储顶级节点的ID
treeData.forEach(node => {
  if (!node.children) { // 检查是否为顶级节点
    topLevelNodes.push(node.id); // 将顶级节点的ID添加到数组中
  }
});
// 然后将topLevelNodes设置为default-expanded-keys的值

 最后,在:ml-search[el-tree]组件中使用这个default-expanded-keys属性:

<el-tree :data="treeData" :default-expanded-keys="topLevelNodes"></el-tree>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值