树形结构互转

树形结构互转

1、线性转树形

    lineToTree (list) {
      const _list = list.map(e => ({ id: e.id, pid: e.parentId, label: e.name, raw: e }));
      const addChild = (arr, obj) => {
        const { pid } = obj;
        arr.forEach(e => {
          // 没有子节点就创建
          !e.children && (e.children = []);
          // 当前层级取找
          if (e.id === pid) {
            e.children.push(obj);
          } else {
            // 没找到就在当前层子节点取找
            addChild(e.children, obj);
          }
        });
      };

      // 第一层先压入
      const retArr = _list.filter(e => e.pid === 0);
      // 只循环整个 list 一次
      _list.forEach(cur => {
        cur.pid !== 0 && addChild(retArr, cur); // 一个个取找父节点
      });
      return retArr;
    },

2、线性转树形

3、mixin.js

import { GetDeptTree } from '@/api/system.js';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export const deptTreeMixin = {
  // <treeselect v-model="form.parentId" :options="deptOptions" :show-count="true" placeholder="选择上级部门" />
  components: { Treeselect },
  data () {
    return {
      deptTreeOptions: undefined
    };
  },
  created () {
    this.getTreeselect();
  },
  methods: {
    /* 处理接口数据 */
    lineToTree (list) {
      const _list = list.map(e => ({ id: e.id, pid: e.parentId, label: e.name, raw: e }));
      const addChild = (arr, obj) => {
        const { pid } = obj;
        arr.forEach(e => {
          // 没有子节点就创建
          !e.children && (e.children = []);
          // 当前层级取找
          if (e.id === pid) {
            e.children.push(obj);
          } else {
            // 没找到就在当前层子节点取找
            addChild(e.children, obj);
          }
        });
      };

      // 第一层先压入
      const retArr = _list.filter(e => e.pid === 0);
      // 只循环整个 list 一次
      _list.forEach(cur => {
        cur.pid !== 0 && addChild(retArr, cur); // 一个个取找父节点
      });
      return retArr;
    },

    /* 获取接口数据 */
    getTreeselect () {
      const params = { pageNum: 1, pageSize: 9999 };
      GetDeptTree(params).then(res => {
        const { result: { list }, errcode, errmsg } = res;
        if (errcode === 0) {
          this.deptTreeOptions = this.lineToTree(list);
        } else {
          console.log(errmsg);
        }
      });
    }
  }
};