el-tree刷新树默认展开/保留当前操作节点获取展开的节点

default-expanded-keys="defaultShowNodes"指定需要默认展开的数组。一定要加node-key,代表唯一的值,这里指定的是谁就把谁加到默认展开的数组中去,一般都是id。分别是展开节点时触发和收起节点时触发。
摘要由CSDN通过智能技术生成

 

 @node-expand="openNode"

@node-collapse="closeNode"

分别是展开节点时触发和收起节点时触发

:default-expanded-keys="defaultShowNodes"指定需要默认展开的数组 

一定要加node-key,代表唯一的值,一般都是id

 

 openNode (data, node, self) {
      // console.log(data,node.self,'展开');
      // 保存当前展开的节点
      let flag = false
      this.defaultShowNodes.some(item => {
        if (item === data.id) { // 判断当前节点是否存在, 存在不做处理
          flag = true
          return
        }
      })
      if (!flag) { // 不存在则存到数组里
        this.defaultShowNodes.push(data.id)
      console.log(this.defaultShowNodes);
  }
    },
    closeNode (data, node, self) {
      //  console.log(data,node.self,'关闭&#
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于el-tree展开节点后是另一个el-tree的情况,你可以通过使用el-tree组件的自定义模板来实现。在展开节点时,你可以将子节点绑定到另一个el-tree组件的数据源中。 首先,确保你已经在项目中引入了el-tree组件。然后,在你的Vue组件中,可以这样定义el-tree组件: ```html <template> <div> <el-tree :data="treeData" :node-key="nodeKey" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </div> </template> <script> export default { data() { return { treeData: [ { label: '节点1', children: [ { label: '子节点1', children: [ { label: '子节点1.1', }, { label: '子节点1.2', }, ], }, ], }, { label: '节点2', children: [ { label: '子节点2', children: [ { label: '子节点2.1', }, { label: '子节点2.2', }, ], }, ], }, ], nodeKey: 'label', defaultProps: { children: 'children', label: 'label', }, }; }, methods: { handleNodeClick(data) { // 在这里处理节点点击事件 // 获取点击的节点数据data,然后将其作为新的数据源赋值给另一个el-tree组件 this.treeData = data.children; }, }, }; </script> ``` 在上面的示例中,我们使用了el-tree组件的data属性绑定了的数据源。当点击节点时,通过handleNodeClick方法获取到该节点的子节点数据,然后将其赋值给treeData,这样就实现了展开节点后显示另一个el-tree的效果。 注意,你可以根据实际需求修改数据结构和事件处理逻辑。这只是一个简单的示例,希望能对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值