首页
友链
导航
影视
壁纸
统计
留言板
Search
1
el-upload自定义触发按钮及触发上传前判断
869 阅读
2
vue配置二级目录以及nginx多网站部署
705 阅读
3
el-cascader选择任意一级搭配懒加载使用,单选框radio不会触发懒加载
585 阅读
4
joe主题自定义导航页面
541 阅读
5
js获取昨天今天明天日期
485 阅读
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
登录
Search
标签搜索
web
vue
node项目实战
js
javascript
typecho
css
vuex
router
nginx
git
element
joe
utils
leaflet
dateFormat
map
date
axios
reg
辰漪
累计撰写
66
篇文章
累计收到
122
条评论
首页
栏目
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
页面
友链
导航
影视
壁纸
统计
留言板
搜索到
2
篇与
utils
的结果
2024-04-12
js扁平结构转树状结构
扁平数据结构转换为树状结构{tabs}{tabs-pane label="递归方式"}/** * @description 扁平数据转树状 * @param {Array} arr 扁平数据 * @param {String} id id字段名 * @param {String} pid 父id字段名 * @returns {Array} tree 树状结构 */ function arrayToTree(arr, id, pid) { let tree = [] const lv1 = getLv1(arr) // 1. 先将一级菜单获取到,放到一个数组里边 tree = addSon(lv1) function addSon (lv1) { arr.forEach((item) => { if(!item.children) item.children = [] // 给所有菜单加上children节点 // console.log('执行了'); if (item[pid]) { lv1.forEach((lv1Item) => { if (item[pid] === lv1Item[id]) { if(!lv1Item.children) lv1Item.children = [] lv1Item.children.push(item) const newarr = [] newarr.push(item) return addSon(newarr) } }) } }) return lv1 } function getLv1 (arr) { const lv1 = [] arr.forEach((item) => { if (item[pid] === 0) { lv1.push(item) } }) return lv1 } return tree }{/tabs-pane}{tabs-pane label="id映射引用"}/** * @description 扁平数据转树状 * @param {Array} arr 扁平数据 * @param {String} id id字段名 * @param {String} pid 父id字段名 * @returns {Array} tree 树状结构 */ function arrayToTree(arr = [], id = 'id', pid = 'pid') { const data = JSON.parse(JSON.stringify(arr)) const idMap = new Map() const tree = [] // 转换为id映射 data.forEach(item => idMap.set(item[id], item)) // 遍历数据,找到根节点, 并追加children节点 data.forEach(item => { if (!item[pid]) return tree.push(item) const parent = idMap.get(item[pid]) if (!parent.children) parent.children = [] parent.children.push(item) }) return tree }{/tabs-pane}{/tabs}数据测试const arr = [ { id: 1, label: '系统管理', pid: 0 }, { id: 2, label: '用户管理', pid: 1 }, { id: 3, label: '角色管理', pid: 1 }, { id: 4, label: '菜单管理', pid: 1 }, { id: 5, label: '视频管理', pid: 0 }, { id: 6, label: '视频分类', pid: 5 }, { id: 7, label: '视频标签', pid: 5 }, { id: 8, label: '视频标签-add', pid: 7 }, { id: 9, label: '视频标签-del', pid: 7 }, ] // 递归方式 console.log(arrayToTree(arr, 'id', 'pid')) // id映射引用方式 console.log(arrayToTree(arr))测试输出[ { id: 1, label: '系统管理', pid: 0, children: [ { id: 2, label: '用户管理', pid: 1 }, { id: 3, label: '角色管理', pid: 1 }, { id: 4, label: '菜单管理', pid: 1 }, ], }, { id: 5, label: '视频管理', pid: 0, children: [ { id: 6, label: '视频分类', pid: 5 }, { id: 7, label: '视频标签', pid: 5, children: [ { id: 8, label: '视频标签-add', pid: 7 }, { id: 9, label: '视频标签-del', pid: 7 }, ], }, ], } ]
2024年04月12日
43 阅读
2 评论
2 点赞
2024-03-01
个人js工具函数库
使用方法npm install @cy-boy/cy-utilsbaseStringNumberDomOther
2024年03月01日
56 阅读
0 评论
1 点赞