数据结构转换：轻松转换扁平数据至 Element 级联组件结构

2024-01-09 11:35:27

如今，在构建用户界面的过程中，我们经常需要使用级联选择器组件来提供丰富的信息选择功能。Element UI 提供了出色的级联选择器组件 Cascader，能够轻松满足我们的需求。然而，在实际应用中，我们可能需要将扁平化的样本数据转换成适用于 Element 级联组件的数据结构，以便更好地利用级联选择器组件的强大功能。

扁平数据结构的特点

扁平数据结构是一种简单的数据组织方式，其中数据元素之间没有层级关系，所有数据都位于同一层级上。扁平数据结构通常使用数组或列表来表示，每个元素都可以通过其索引值来访问。扁平数据结构的优点是简单易懂，易于存储和处理。然而，当数据量较大时，扁平数据结构可能会变得难以管理。

Element 级联组件的数据结构

Element 级联组件的数据结构是一种树形结构，其中数据元素之间存在层级关系。树形结构通常使用嵌套的数组或对象来表示，每个父节点可以包含多个子节点，子节点也可以包含自己的子节点，以此类推。Element 级联组件的数据结构可以很好地表示具有层级关系的数据，例如地区、分类、产品等。

数据转换过程

将扁平化的样本数据转换成适用于 Element 级联组件的数据结构需要经过以下几个步骤：

识别数据中的层级关系 ：首先，我们需要识别数据中的层级关系。例如，如果我们有一组地区数据，那么我们可以根据省份、城市、区县之间的层级关系来进行识别。
创建树形结构的根节点 ：接下来，我们需要创建一个树形结构的根节点。根节点是树形结构的最高层节点，它不包含任何子节点。在我们的地区数据示例中，根节点可以是“中国”。
遍历数据并创建子节点 ：接下来，我们需要遍历数据并创建子节点。对于每个数据元素，我们需要根据其层级关系找到它的父节点，然后将它作为子节点添加到父节点中。在我们的地区数据示例中，我们可以将省份作为根节点的子节点，城市作为省份的子节点，区县作为城市的子节点。
重复步骤 3 直到所有数据都被转换为树形结构 ：我们需要重复步骤 3，直到所有数据都被转换为树形结构。

代码示例

以下代码示例展示了如何将扁平化的样本数据转换成适用于 Element 级联组件的数据结构：

const flatData = [
  {
    id: 1,
    name: "中国",
  },
  {
    id: 2,
    name: "北京",
    parentId: 1,
  },
  {
    id: 3,
    name: "上海",
    parentId: 1,
  },
  {
    id: 4,
    name: "广州",
    parentId: 1,
  },
  {
    id: 5,
    name: "深圳",
    parentId: 1,
  },
  {
    id: 6,
    name: "朝阳区",
    parentId: 2,
  },
  {
    id: 7,
    name: "海淀区",
    parentId: 2,
  },
  {
    id: 8,
    name: "西城区",
    parentId: 2,
  },
  {
    id: 9,
    name: "黄浦区",
    parentId: 3,
  },
  {
    id: 10,
    name: "徐汇区",
    parentId: 3,
  },
  {
    id: 11,
    name: "浦东新区",
    parentId: 3,
  },
  {
    id: 12,
    name: "天河区",
    parentId: 4,
  },
  {
    id: 13,
    name: "越秀区",
    parentId: 4,
  },
  {
    id: 14,
    name: "荔湾区",
    parentId: 4,
  },
  {
    id: 15,
    name: "南山区",
    parentId: 5,
  },
  {
    id: 16,
    name: "福田区",
    parentId: 5,
  },
  {
    id: 17,
    name: "罗湖区",
    parentId: 5,
  },
];

const treeData = [];

// 创建根节点
const rootNode = {
  id: 1,
  name: "中国",
  children: [],
};

treeData.push(rootNode);

// 遍历数据并创建子节点
for (let i = 0; i < flatData.length; i++) {
  const item = flatData[i];

  if (item.parentId === null) {
    continue;
  }

  const parentNode = treeData.find((node) => node.id === item.parentId);

  if (parentNode) {
    parentNode.children.push(item);
  }
}

console.log(treeData);