封装公共方法：树形数组扁平化

需求

项目多个地方需要操作树形数据，多次用递归比较麻烦，于是就打算封装成公共方法。

解决

第一步：在 /src/utils 路径下新建 arr.js 文件

/**
 *
 * @param {Array} arrs 树形数据
 * @param {string} childs 树形数据子数据的属性名,常用'children'
 * @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)
 * @returns
 */
// 数组扁平化
export function extractTree(arrs,childs,attrArr) {
  let attrList = []
  if(!Array.isArray(arrs)&&!arrs.length)return []
  if(typeof childs !== 'string')return []
  if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
    attrList = Object.keys(arrs[0])
    attrList.splice(attrList.indexOf(childs), 1)
  }else{
    attrList = attrArr
  }
  let list = []
  const getObj = (arr)=>{
    arr.forEach(function(row){
      let obj = {}
      attrList.forEach(item=>{
        obj[item] = row[item];
      })
      list.push(obj)
      if(row[childs]){
        getObj(row[childs])
      }
    })
    return list
  }
  return getObj(arrs)
}

第二步：在 main.js 中引入并暴露函数名

import { extractTree } from '@/utils/arr'
// 全局挂载
Vue.prototype.extractTree = extractTree

第三步：使用

任意位置 this.extractTree(arr, 'chidren')