element ui Cascader 级联选择器， 将数据递归处理

element-ui 中的 Cascader 级联选择器需要一个级联的数据源，这个数据源可以是一个普通的数组或者是一个包含子节点的树形结构。如果数据源是一个普通的数组，需要通过递归处理将其转化为树形结构。

以下是一个示例代码，将普通的数组转化为树形结构：

function convertToTree(data) {
  let result = []
  let map = {}

  // 先将所有数据按照 id 存入一个 map 中
  for (let i = 0; i < data.length; i++) {
    map[data[i].id] = data[i]
  }

  // 将所有数据遍历一遍，如果当前数据有 parentId，将其作为父节点的子节点存入父节点的 children 中
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    if (item.parentId) {
      let parent = map[item.parentId]
      if (parent) {
        if (!parent.children) {
          parent.children = []
        }
        parent.children.push(item)
      }
    } else {
      result.push(item)
    }
  }

  return result
}

在上述代码中，首先将所有数据按照 id 存入一个 map 中，然后遍历所有数据，如果当前数据有 parentId，就将其作为父节点的子节点存入父节点的 children 中，最后返回处理后的树形结构。

使用示例：

let data = [
  { id: 1, name: '选项1' },
  { id: 2, parentId: 1, name: '选项1-1' },
  { id: 3, parentId: 1, name: '选项1-2' },
  { id: 4, name: '选项2' },
  { id: 5, parentId: 4, name: '选项2-1' },
  { id: 6, parentId: 4, name: '选项2-2' }
]

let treeData = convertToTree(data)
console.log(treeData)

输出结果：

[
  {
    "id": 1,
    "name": "选项1",
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "name": "选项1-1"
      },
      {
        "id": 3,
        "parentId": 1,
        "name": "选项1-2"
      }
    ]
  },
  {
    "id": 4,
    "name": "选项2",
    "children": [
      {
        "id": 5,
        "parentId": 4,
        "name": "选项2-1"
      },
      {
        "id": 6,
        "parentId": 4,
        "name": "选项2-2"
      }
    ]
  }
]

将转换后的数据源作为 Cascader 的 options 属性即可完成级联选择器的数据递归处理。