当前位置:网站首页>编辑时过滤当前节点及根据限制的层数过滤数据
编辑时过滤当前节点及根据限制的层数过滤数据
2022-07-31 05:20:00 【前端备忘录】
判断当前树节点深度
getTreeDeep(treeData) {
let arr = [];
arr.push(treeData);
let depth = 0;
while (arr.length > 0) {
let temp = [];
for (let i = 0; i < arr.length; i++) {
temp.push(arr[i]);
}
arr = [];
for (let i = 0; i < temp.length; i++) {
if (temp[i].children && temp[i].children.length > 0) {
for (let j = 0; j < temp[i].children.length; j++) {
arr.push(temp[i].children[j]);
}
}
}
if (arr.length >= 0) {
depth++;
}
}
return depth;
},
过滤当前节点
filterCurNode(data,id){
let result ;
if(id) result = data.filter(item => item.id !== id);
else result = data;
return result;
},
标题
let level = 5;//树限制的层级数
setTreeNode(data, currentLevel, limitLevel, id) {
const vm = this;
currentLevel = currentLevel + 1;
return vm.filterCurNode(data,id).map(item => {
item.children = item.children && item.children.length && currentLevel < level -limitLevel ? vm.setTreeNode(item.children, currentLevel, limitLevel,id) : [];
return item
});
},
用法
this.setTreeNode(this.treeInfo, 0 , this.getTreeDeep(info),info.id)
其中 this.treeInfo 整棵树的数据;info 为当前选中树节点数据
边栏推荐
猜你喜欢
随机推荐
DOM操作案例1-点击,使表格的颜色切换(点击单元格,整行或整列颜色切换)
力扣.找到打字符串中所有字母异位词
ES6-class类
对称加密和非对称加密
VS2019配置配置项目属性自定义输出目录与中间目录
物联网时代网络安全成第一大关
Oracle入门 04 - Vmware虚拟机安装配置
基础配置--IP地址--主机名--域名
JDBC的使用
力扣刷题之排序链表
ES6-02-let和const关键字
DDNS搭建
离线安装activeMq
【博学谷学习记录】超强总结,用心分享 | 软件测试 测试基本概念、模型与用例
Websocket协议解析与QT代码示例
DOM操作-事件的绑定与解绑
顶级程序员都是怎么做的?
通过js禁止ctrl+滚轮放缩浏览器页面,禁止用手势放大
力扣.字母异位词分组
常见网络攻击与防御方法