vue 为树形数据挂载父子关联关系，并组装完整名称

原始JSON数据

[
    {
        "children": [
            {
                "label": "大奖奖励",
                "value": "0-1"
            },
            {
                "label": "比赛奖励",
                "value": "0-2"
            },
            {
                "label": "销售排名",
                "value": "0-3"
            }
        ],
        "label": "奖励",
        "value": "0"
    },
    {
        "children": [
            {
                "label": "诚信不良",
                "value": "1-1"
            },
            {
                "label": "违规经营",
                "value": "1-2"
            }
        ],
        "label": "惩罚",
        "value": "1"
    }
]

 

处理函数

 

// 初始化树形数据，为数据挂载父子关联关系，并组装完整名称
initTree() {
  const _this = this;

  // 原始树形数据
  const rawArr = [], // 略
    // 扁平数组
    flattenArr = [],
    // 显示名称
    labelName = "label",
    // 值名称
    valueName = "value",
    // 子元素名称
    childrenName = "children",
    // 完整路径分隔符
    fullNameSplitStr = "/",
    // 是否挂载父级节点
    mountParent = true;
  /**
   * 重新组合树数据(根据需要来重组树结构中的属性字段)
   * @param {Array} arr 树形数组
   * @param {Object} parent 父级节点
   * @param {String} fullName 完整名称
   */
  const dealTreeData = function (arr, parent, fullName) {
    // 便利树形数据
    arr.forEach((node) => {
      // 判断是否需要挂载父级
      if (mountParent) {
        node.parent = parent;
      }

      // 判断是否存在父级节点，拼接完整名称
      if (parent) {
        // 存在父级，将当前节点名称拼接到完整名称中
        node.fullName = fullName + fullNameSplitStr + node[labelName];
      } else {
        // 不存在父级，以当前节点名称作为根名称
        node.fullName = node[labelName];
      }

      // 将节点添加到扁平数组中
      flattenArr.push({ ...node });

      // 获取节点子元素
      const children = node[childrenName];
      if (children && children.length) {
        dealTreeData(children, node, node.fullName);
      }
    });
  };

  // 重新组合数据
  dealTreeData(rawArr, null, "");
  const newArr = [...rawArr];
  // console.log("newArr", newArr);
  // console.log("flattenArr", flattenArr);
}

 

处理后的JSON数据

// 新数组-未挂载父级节点
[
    {
        "children": [
            {
                "label": "大奖奖励",
                "value": "0-1",
                "fullName": "奖励/大奖奖励"
            },
            {
                "label": "比赛奖励",
                "value": "0-2",
                "fullName": "奖励/比赛奖励"
            },
            {
                "label": "销售排名",
                "value": "0-3",
                "fullName": "奖励/销售排名"
            }
        ],
        "label": "奖励",
        "value": "0",
        "fullName": "奖励"
    },
    {
        "children": [
            {
                "label": "诚信不良",
                "value": "1-1",
                "fullName": "惩罚/诚信不良"
            },
            {
                "label": "违规经营",
                "value": "1-2",
                "fullName": "惩罚/违规经营"
            }
        ],
        "label": "惩罚",
        "value": "1",
        "fullName": "惩罚"
    }
]

 

// 扁平化后数组
[
    {
        "children": [
            {
                "label": "大奖奖励",
                "value": "0-1",
                "fullName": "奖励/大奖奖励"
            },
            {
                "label": "比赛奖励",
                "value": "0-2",
                "fullName": "奖励/比赛奖励"
            },
            {
                "label": "销售排名",
                "value": "0-3",
                "fullName": "奖励/销售排名"
            }
        ],
        "label": "奖励",
        "value": "0",
        "fullName": "奖励"
    },
    {
        "label": "大奖奖励",
        "value": "0-1",
        "fullName": "奖励/大奖奖励"
    },
    {
        "label": "比赛奖励",
        "value": "0-2",
        "fullName": "奖励/比赛奖励"
    },
    {
        "label": "销售排名",
        "value": "0-3",
        "fullName": "奖励/销售排名"
    },
    {
        "children": [
            {
                "label": "诚信不良",
                "value": "1-1",
                "fullName": "惩罚/诚信不良"
            },
            {
                "label": "违规经营",
                "value": "1-2",
                "fullName": "惩罚/违规经营"
            }
        ],
        "label": "惩罚",
        "value": "1",
        "fullName": "惩罚"
    },
    {
        "label": "诚信不良",
        "value": "1-1",
        "fullName": "惩罚/诚信不良"
    },
    {
        "label": "违规经营",
        "value": "1-2",
        "fullName": "惩罚/违规经营"
    }
]