[TOC]
>[success] # 树形结构,根据id筛选某一条数据
项目中遇到了一个树需要做展开收起功能,但是数据结构是树形的(对象的属性children又是一个对象那种)数据如下:
~~~
let data = [{
"id": "1",
"label": "第1层数据",
"code": "100001007002002",
"type": "o",
"sort": 30,
"children": [{
"id": "1.1",
"parentId": "1",
"label": "第1层数据",
"type": "u"
},
{
"id": "1.2",
"parentId": "1",
"label": "第2层数据",
"code": "100001007001001007",
"type": "o",
"sort": 30,
"children": [{
"id": "1.2.1",
"parentId": "1.2",
"label": "第3层数据",
"type": "u"
}]
}]
}]
~~~
~~~
假如现在只有一个'id'如何取到某一层的数据, 实现如下:
~~~
~~~
/**
* 根据id获取某层节点数据
* @param {Array} arr - 要过滤的id,
* @param {Array} data - 要过滤的数据源
* @param {Array} city - 最终过滤后的返回值
*/
function getCity(arr, data, city = []) {
if (typeof data === "object") {
if(arr instanceof Array){ // 过滤条件为数组
for (let i = 0; arr[i] !== undefined; i++) {
for (let j = 0; data[j] !== undefined; j++) {
if (arr[i] === data[j].id) {
city.push(data[j]);
}
}
};
}else{ // 过滤条件不是数组
for (let j = 0; data[j] !== undefined; j++) {
if (arr === data[j].id) {
city.push(data[j]);
}
}
}
for (let i = 0; data[i] !== undefined; i++) {
getCity(arr, data[i].children, city);
};
}
return city;
}
~~~
使用时候这样写:
~~~
为了灵活性可以用2中传参方式:
let filter = getCity(['1.2.1', '1.2'], data) // 1.2.1和1.2的数据
let filter = getCity('1.2.1', data) // 第三层数据
需要注意地方:
1. 如果需要过滤的数据的id是'字符串'写的形式必须是字符串形式,如果是'number'必须是'number'形式,
不然会找不到数据的
2. 还有就是数据里的'children'和'id'有可能叫别的名字,这块主要看数据字段名称叫啥吧
~~~
- vue复选框逻辑
- get请求给后台传数组
- 提交表单时传值参数处理方案
- Element ui上传图片功能
- async和await的使用
- 时间戳转换
- 日期格式转换时间戳
- 时间戳转换日期格式
- 对深拷贝的认知总结
- vue-右键菜单功能
- textarea中换行、回车、空格的识别与处理
- element ui表格合并
- 合并行(上下行)
- 双层for循环
- 数组去重
- 瀑布流
- 前端多条件筛选
- 闭包的理解
- 改变this指向
- vue单选框逻辑
- 对象数组根据某个属性来进行排序
- vscode插件整理
- 对象数组多条件去重
- Blob类型数据转换Json数据类型
- Element ui做批量上传功能
- 前端cookie和后端cookie
- 强制转换https协议
- 给事件传额外参数
- 树形结构数据处理
- 查找所有父级数据
- 根据id筛选单条数据
- 动态引入阿里图标库
- 四舍五入
- 封装一个Promise.allSettled方法
- 判断输入框内是否有emoji表情
- element-ui的popover组件位置偏移
- formData上传文件时,携带【数组对象参数】
- 前端解压压缩包(zip)解压后上传解压的文件
- element ui表格列相同解决办法
- elementUI,table复选框多选,翻页/切换条数时保持选中状态
- cookie 和 token 的区别