// 有父子级从属关系的对象数组
const list = [
{ id: 1, name: "all" },
{ id: 2, name: "Z", pId: 1 },
{ id: 4, name: "B", pId: 1 },
{ id: 16, name: "Z-y", pId: 2 },
{ id: 34, name: "Z-y-1", pId: 16 },
{ id: 65, name: "B-x", pId: 4 },
{ id: 98, name: "Z-b", pId: 2 },
{ id: 127, name: "B-2", pId: 4 }
]
// 排序化为(父子级挨着)：
[
{ id: 1, name: "all" },
{ id: 2, name: "Z", pId: 1 },
{ id: 16, name: "Z-y", pId: 2 },
{ id: 34, name: "Z-y-1", pId: 16 },
{ id: 98, name: "Z-x", pId: 2 },
{ id: 4, name: "B", pId: 1 },
{ id: 65, name: "B-1", pId: 4 },
{ id: 127, name: "B-2", pId: 4 }
] 如果只有两层的嵌套,就不需要递归了，比较简单：
let temp = list.map(i => ({ ...i, sortNum: parseFloat(`${i.pId}${!!i.pId ? '.' : ''}${i.id}`) }))
temp = _.sortBy(temp, 'sortNum')【父子级数组排序】可以嵌套多层的话，我采用的是双递归，太菜了想不到更好的方法了，望指教！！！
// 先转树
https://segmentfault.com/a/11...
//再
function tree2Arr(tree) {
tree.forEach(i => {
newArr.push(i);
if (i.children) {
tree2Arr(i.children)
} else {
return
}
})
}推荐阅读
- Koa|koa返回前端响应后，后台静默做其他操作
- js|前端模糊查询当前列表
- vue|vue+xlsx实现表格的导入导出
- js|jsonp跨域
- vue|vue打包后dist的使用
- vue|vuex的使用
- vue|vue中代理解决跨域
- JavaScript中通过style修改属性时需要添加“px”
- vue.js|vue开发搜索框防抖的优化和日常报错,