js 递归实现 数组转树形

// pid = 0 为根节点
const arr = [
        {pid: 0, id: 1, name: 'm1'},
        {pid: 1, id: 2, name: 'm2'},
        {pid: 0, id: 3, name: 'm3'},
        {pid: 3, id: 4, name: 'm4'},
        {pid: 2, id: 5, name: 'm5' }
]

/* 目标
[
  {
    pid: 0,
    id: 1,
    name: 'm1',
    children: [
      {
        pid: 1,
        id: 2,
        name: 'm2',
        children: [
          pid: 2,
          id: 5,
          name: 'm5'
        ]
      }
    ]
  },
  {
    pid: 0,
    id: 3,
    name: 'm3',
    children: [
      {
        pid: 3,
        id: 4,
        name: 'm4'
      }
      
    ]
  }
]
*/


const listToTree = (list = [], tree = [] , pid = 0) => {
	list.forEach(item => {
		if (item.pid === pid) {
			const child = {
				...item,
				children:[]
			}	
			listToTree(list, child.children, item.id)
			
			if (child.children.length <= 0) {
				delete child.children
			} 
			tree.push(child)
		}
	})
	return tree
}

// vue实现一个最简单的树状组件

<template>
    <div :style="getDetph">
      <div @click="getData ">
        <span >{{isShow?'-':'+'}}</span>{{title}}
      </div>
      <div  v-show="isShow">
        <tree  v-for="item in tree"  :tree="item.children" :title="item.name"  :detph="detph+1"  ></tree> 
      </div>
    </div>
</template>

<script>
export default {
  name: 'tree',
  props: {
    tree: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ''
    },
    detph:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: true
    }
  },
  created(){
  },
  computed: {
    getDetph() {
      return `transform:translate(${this.detph * 20}px)`
    }
  },
  methods: {
    getData() {
      this.isShow = !this.isShow
    }
  }
}
</script>

// 父组件

<template>
	<Tree 
	      :tree="tree.children" 
	      :title="tree.name"
	 > </Tree>
 </template>
 
 <script>
import Tree from '../../components/tree.vue'
export default {
  components: {
    Tree
  },
  data(){
	  return {
	  	tree: {
	  	name: 'test',
	  	children:[
  {
    pid: 0,
    id: 1,
    name: 'm1',
    children: [{
			        pid: 1,
			        id: 2,
			        name: 'm2',
			        children: [
			          pid: 2,
			          id: 5,
			          name: 'm5'
			        ]
			      }
			    ]
			  },
			  {
			    pid: 0,
			    id: 3,
			    name: 'm3',
			    children: [
			      {
			        pid: 3,
			        id: 4,
			        name: 'm4'
			      }
			      
			    ]
			  }]
	  	}
	  }
  }
 }
</script>