js数组与树形结构的相互转化

1.在util中创建数组转树形结构的js文件

/*
 * @FileDescription: 数组转树形结构
 * @Author: chen
 * @Date: 2022-09-22 10:27:10
 * @LastEditTime: 2022-09-22 10:43:47
 */
export function arrToTreeData(data,pidVal = 0,pidName = "pid",childName = "children"
) {
  // 一般 pid 就是 parentId，指的是父级 id，这里默认是 pid
  // 一般 pidVal 的值为 0 时，默认是根节点
  // childName 在大多数表格，多级嵌套等组件里通常都是用 children 命名，这里默认是 children
  let result = []; // 初始化

  // 递归匹配，计算量较大
  data.forEach(item => {
    if (item[pidName] === pidVal) {
      result.push({
        ...item,
        [childName]: arrToTreeData(data, item.id)
      });
    }
  });

  return result;
}

2.在util中创建树形结构转一维数组的js文件

/*
 * @FileDescription: 树形结构转一维数组
 * @Author: chen
 * @Date: 2022-09-22 10:39:56
 * @LastEditTime: 2022-09-22 10:42:44
 */
export function treeDataToarr(arr) {
    let data = JSON.parse(JSON.stringify(arr))
    let newData = []
    const callback = (item) => {
        (item.children|| (item.children= [])).map(v => {
            callback(v)
        })
        delete item.list
        newData.push(item)
    }
    data.map(v => callback(v))
    return newData
}

3.页面调用

<!--
 * @FileDescription 数组与树形结构的相互转化
 * @Author: chen
 * @Date: 2022-08-30 14:10:11
 * @LastEditTime: 2022-09-22 10:44:24
-->
<template>
  <el-button @click="start">点击开始</el-button>
</template>

<script>
import { arrToTreeData } from "../util/arrToTreeData";
import { treeDataToarr } from "../util/treeDataToarr";
export default {
  data() {
    return {
    };
  },
  methods: {
    start() {
      const list = [
        { id: 1, pid: 0, name: "四川" },
        { id: 2, pid: 1, name: "成都" },
        { id: 3, pid: 1, name: "宜宾" },
        { id: 4, pid: 1, name: "绵阳" },
        { id: 5, pid: 1, name: "德阳" },
        { id: 6, pid: 2, name: "高新区" },
        { id: 7, pid: 2, name: "武侯区" },
        { id: 8, pid: 3, name: "翠屏区" }
      ];
      let a = arrToTreeData(list);
      console.log(a, "-----------");    
      let b=treeDataToarr(a)
      console.log(b, "+++++++++++");
    }
  }
};
</script>

<style></style>