对数组进行树状结构输出(JS)

import cloneDeep from 'lodash/cloneDeep';
// 树的解析默认配置
const configDefault = {
  'key': 'id',
  'parentKey': 'parentId',
  'text': 'name',
  'childKey': 'children',
};

const treeFormat = (data, config) => {
  const copyData = cloneDeep(data);
  const { parentKey, text, key, childKey } = { ...configDefault, ...config };
  let i;
  let l;
  if (copyData.constructor.name === 'Array') {
    // 根目录
    const root = [];
    const tmpMap = [];// 缓存数组
    // 初始化数据
    for (i = 0, l = copyData.length; i < l; i += 1) {
      copyData[i].title = copyData[i][text];
      tmpMap[copyData[i][key]] = copyData[i];
    }
    for (i = 0, l = copyData.length; i < l; i += 1) {
      if (tmpMap[copyData[i][parentKey]] && copyData[i][key] !== copyData[i][parentKey]) {
        if (!tmpMap[copyData[i][parentKey]][childKey]) {
          tmpMap[copyData[i][parentKey]][childKey] = [];
        }
        copyData[i].parentName = tmpMap[copyData[i][parentKey]][text];
        tmpMap[copyData[i][parentKey]][childKey].push(copyData[i]);
      } else {
        root.push(copyData[i]);
      }
    }
    return root;
  }
  return copyData;
};

export default treeFormat;

 

import cloneDeep from 'lodash/cloneDeep';
// 树的解析默认配置
const configDefault = {
  'key': 'id',
  'parentKey': 'parentId',
  'text': 'name',
  'childKey': 'children',
};

const treeFormat = (data, config) => {
  const copyData = cloneDeep(data);
  const { parentKey, text, key, childKey } = { ...configDefault, ...config };
  if (copyData.constructor.name === 'Array') {
    // 根目录
    const root = [];
    const tmpMap = {};// 缓存数组
    // 初始化数据
    copyData.map(item => {
      item.title = item[text];
      tmpMap[item[key]] = item;
      return item;
    });
    copyData.map(item => {
      if (tmpMap[item[parentKey]] && item[key] !== item[parentKey]) {
        if (!tmpMap[item[parentKey]][childKey]) {
          tmpMap[item[parentKey]][childKey] = [];
        }
        item.parentName = tmpMap[item[parentKey]][text];
        tmpMap[item[parentKey]][childKey].push(item);
      } else {
        root.push(item);
      }
      return item;
    });
    return root;
  }
  return copyData;
};

export default treeFormat;
//渲染数据
function mapCate1ToOptions(categorys) {
  return categorys && categorys.map((category) => {
      return Object.assign({}, {
        title: category.codeName,
        value: category.code,
        key:category.code,
        isLeaf: false,
        children: getChildCategorys(category)
      });
    }
  )
}

function getChildCategorys(categoryCur) {
  return categoryCur.children && categoryCur.children.map((category) => {
    return Object.assign({}, {
      title: category.codeName,
      value: category.code,
      key: category.code,
      isLeaf: category.children ? false : true,
      children: category.children ? getChildCategorys(category) : null
    });
  });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值