element折叠、展开树

树代码:

注意:

1、需要设置“node-key”,否则无法获取子节点

2、设置ref节点

  <el-tree
          :data="orgTreeData"
          :props="props"
          node-key="id"
          show-checkbox
          check-strictly
          :expand-on-click-node="false"
          ref="orgTreeRef"
          @check="handleCheckChange"
      />

 

展开节点代码: 

注意:

其中“orgTreeRef”为机构树设置的ref

    // 展开所有节点
    expandTree() {
      for (var i = 0; i < this.$refs.orgTreeRef.store._getAllNodes().length; i++) {
        this.$refs.orgTreeRef.store._getAllNodes()[i].expanded = true;
      }
    },
    // 折叠所有节点
    unExpandTree() {
      for (var i = 0; i < this.$refs.orgTreeRef.store._getAllNodes().length; i++) {
        this.$refs.orgTreeRef.store._getAllNodes()[i].expanded = false;
      }
    },

 

对于Element Plus的形控件折叠,可以使用以下方法进行操作。首先,你可以通过设置形控件的节点的`expanded`属性来控制节点的展开折叠。使用`this.$refs.TreeName.store.nodesMap[item.id].expanded = true/false;`可以控制形控件中指定节点的展开折叠状态。其次,你可以使用`this.$refs.TreeName.toggleRowExpansion(item, true/false);`来控制形表格控件中指定节点的展开折叠状态,其中`true`表示展开节点,`false`表示折叠节点。 如果你想要封装一个方法来控制形控件的展开折叠,可以按照以下步骤进行操作。首先,需要传入形控件的名称、数据数组以及一个布尔值`isTree`,用来判断是形控件还是形表格控件。其次,使用递归将数据数组中的`children`字段取出并放入一个新的数组`empty`中,将多维数组转换为一维数组。然后,根据`isTree`的值选择相应的操作:如果是形控件,使用`this.$refs.Tree.store.nodesMap[item.id].expanded = true/false;`来控制形控件的展开折叠;如果是形表格控件,使用`tableName.toggleRowExpansion(item, isTree);`来控制形表格控件的展开折叠。最后,根据操作完成后的状态,将`isTree`的值进行切换[2]。 需要注意的是,如果要使设置的展开折叠操作生效,必须将代码放在`$nextTick`中。 综上所述,对于Element Plus的形控件折叠,可以使用上述方法进行操作。你可以根据具体的需求选择合适的方法来控制形控件的展开折叠。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值