如何将扁平日本地区数组转换为v-treeview适配的树形结构？

直接上实现代码：

function convertToTreeViewFormat(areas) {
  return Object.values(areas.reduce((acc, area) => {
    // 构建都道府县层级节点
    if (!acc[area.prefecture]) {
      acc[area.prefecture] = {
        name: area.prefecture,
        id: area.prefecture,
        children: {}
      };
    }
    const prefectureNode = acc[area.prefecture];

    // 构建市/区层级节点
    if (!prefectureNode.children[area.city]) {
      prefectureNode.children[area.city] = {
        name: area.city,
        id: area.city,
        children: []
      };
    }
    const cityNode = prefectureNode.children[area.city];

    // 添加最下层地址项
    cityNode.children.push({
      id: area.id,
      name: area.name
    });

    return acc;
  }, {})).map(prefecture => {
    // 将children的对象结构转为数组
    prefecture.children = Object.values(prefecture.children);
    return prefecture;
  });
}

// 使用示例
const areas = [
  { "id": 1, "name": "的場一丁目", "city": "川越市", "prefecture": "埼玉県" },
  { "id": 2, "name": "大字中野林", "city": "さいたま市西区", "prefecture": "埼玉県" },
  { "id": 3, "name": "大字中釘", "city": "さいたま市西区", "prefecture": "埼玉県" },
  { "id": 4, "name": "平和台1丁目", "city": "練馬区", "prefecture": "東京都" },
  { "id": 5, "name": "平和台2丁目", "city": "練馬区", "prefecture": "東京都" },
  { "id": 6, "name": "平和台3丁目", "city": "練馬区", "prefecture": "東京都" }
];

const treeItems = convertToTreeViewFormat(areas);
console.log(treeItems);

代码逻辑说明 #

• 用reduce遍历原始数组，以都道府县名称为键构建顶层节点，避免重复创建同一都道府县的节点；
• 在每个都道府县节点下，以市/区名称为键构建第二层节点，同样避免重复；
• 将每个地址项直接添加到对应市/区节点的children数组中；
• 最后通过Object.values把对象形式的层级转为数组，完全适配v-treeview的格式要求。

运行代码后，就能得到你需要的树形结构，直接传入v-treeview组件即可使用。

内容的提问来源于stack exchange，提问作者The Blues