首页 > 技术文章 > 利用前端工具将list中的数据转换成树形结构

1gaoyu 2022-03-24 15:56 原文

在菜单列表中可以通过前端将调取整个菜单的list列表数据,在进行菜单显示是根据其父子关系转换成树的结构

/**
 * 将普通列表无限递归转换为树
 * @param  {[type]} list       [普通的列表,必须包括 opt.primaryKey 指定的键和 opt.parentKey 指定的键]
 * @param {[type]} opt [配置参数,支持 primaryKey(主键 默认id) parentKey(父级id对应键 默认pid) nameKey(节点标题对应的key 默认name) valueKey(节点值对应的key 默认id) checkedKey(节点是否选中的字段 默认checked,传入数组则判断主键是否在此数组中) startPid(第一层扫描的PID 默认0) currentDept(当前层 默认0) maxDept(最大递归层 默认100) childKey(递归完成后子节点对应键 默认list) deptPrefix(根据层级重复的前缀 默认'')]
 * @return {[type]}            [description]
 */
export const listConvertTree = (array, opt) => {
  let obj = {
    primaryKey: opt.primaryKey || 'id',
    parentKey: opt.parentKey || 'pid',
    startPid: opt.startPid || 0,
    currentDept: opt.currentDept || 0,
    maxDept: opt.maxDept || 100,
    childKey: opt.childKey || 'children'
  }
  return listToTree(array, obj.startPid, obj.currentDept, obj)
}

 

推荐阅读