根据实际业务要求修改element-UI组件方法归纳整理

这篇博客主要整理了element-ui中el-tree组件的一些关键操作,包括如何展开指定节点,实现filter方法过滤时保留匹配节点的子节点,以及如何计算当前节点展开的子节点数量以适应高度变化。这些技巧对于优化前端界面交互具有实用性。
摘要由CSDN通过智能技术生成

element-ui 中el-tree树形组件:

1、展开指定节点

// 获取节点信息,可根据实际情况修改
​​​​​​​let nodeInfo = this.$refs.treeTarget.store.nodesMap[row.nodePath]; 

openAllChildNodes (nodeInfo) {
    for (let key in nodeInfo) {
        nodeInfo['expanded'] = true;
        // 存在子节点
        if (key == 'parent' && nodeInfo[key].level > 0) {
            this.openAllChildNodes(nodeInfo['parent']);
        }
    }
},

// 展开所有的树节点  updated:20220727

// 展开所有的树节点

let nodeInfos = this.$refs[name].store.nodesMap;

nodeInfos.forEach(item => {
    item.expanded = true;
})

PS: 翻到这篇文章突然想到的,没有实验过,有兴趣的可以试试,如果可以请将你的结果告知我一下哟(by 一条咸鱼的日常摆烂)



2、filter方法搜索过滤时保留匹配节点的子节点

filterNode(value, data) {
     // 如果没有输入任何值,直接返回
      if (!value) { 
        return true 
       }
      // 如果传入的value和data中label相同࿰
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值