vue父子菜单联动

父子菜单联动

<script setup>
// 省市二级菜单
var result = [
  { AreaID: 2, AreaLevel: 2, AreaName: "北京市", ParentId: 1 },
  { AreaID: 3, AreaLevel: 2, AreaName: "广东省", ParentId: 1 },
  { AreaID: 4, AreaLevel: 2, AreaName: "福建省", ParentId: 1 },
  { AreaID: 5, AreaLevel: 2, AreaName: "湖北省", ParentId: 1 },
  { AreaID: 6, AreaLevel: 3, AreaName: "广州市", ParentId: 3 },
  { AreaID: 7, AreaLevel: 3, AreaName: "深圳市", ParentId: 3 },
  { AreaID: 8, AreaLevel: 3, AreaName: "福州市", ParentId: 4 },
  { AreaID: 9, AreaLevel: 3, AreaName: "厦门市", ParentId: 4 },
  { AreaID: 10, AreaLevel: 3, AreaName: "武汉市", ParentId: 5 },
];
// 在省数据中添加value 和label属性
let newResult = result.map((v) => ({
  ...v,
  value: v.AreaID,
  label: v.AreaName,
}));
console.log(newResult);

// 省数据
let p = result.filter((x) => x.AreaLevel === 2);
// 市数据
let c = result.filter((x) => x.AreaLevel === 3);
// 将市数据追加到省数据
p.forEach((item) => {
  item.children = c.filter((v) => v.ParentId === item.AreaID);
});
console.log(p);
// 父子id
let arr = [
  { id: 2, pid: 1, AreaName: "广东省" },
  { id: 6, pid: 2, AreaName: "广州市" },
  { id: 3, pid: 1, AreaName: "湖北省" },
  { id: 4, pid: 1, AreaName: "福建省" },
  { id: 5, pid: 1, AreaName: "河北省" },
  { id: 7, pid: 2, AreaName: "深圳市" },
  { id: 8, pid: 3, AreaName: "武汉市" },
  { id: 9, pid: 8, AreaName: "洪山区" },
  { id: 10, pid: 8, AreaName: "武昌区" },
  { id: 11, pid: 6, AreaName: "白云区" },
  { id: 12, pid: 4, AreaName: "福州市" },
];
// 先一级数据
let root = [];
arr.map((x) => {
  if (x.pid === 1) {
    root.push({ ...x, children: [] });
  }
});
console.log(root);
function tree(pData, data) {
  //pData一级数据，data所有数据
  for (let i = 0; i < pData.length; i++) {
    for (let j = 0; j < data.length; j++) {
      if (data[j].pid === pData[i].id) {
        pData[i].children.push({ ...data[j], children: [] });
      }
    }
    tree(pData[i].children, data);
  }
}
tree(root, arr);
console.log(root);
</script>

<template></template>