总结开发中一些数据处理方法的封装

摘要：

开发中经常会遇到一些组件需要的特定数据结构，后端不一定会返回你需要的数据结构的，所以还是要前端来处理的！这里来总结一下平常开发中遇到的需要处理结构的方法，下次遇到直接拿来用就可以了！

el-tree根据id处理成树形结构数据

要将使用el-tree组件的数据处理成树形结构，您可以按照以下步骤进行操作：

首先，确保您的数据具有id和parentId字段，用于表示节点之间的父子关系。假设您的数据如下所示：

const data = [
  { id: 1, name: '节点1', parentId: 0 },
  { id: 2, name: '节点2', parentId: 1 },
  { id: 3, name: '节点3', parentId: 1 },
  { id: 4, name: '节点4', parentId: 2 },
  { id: 5, name: '节点5', parentId: 2 },
  { id: 6, name: '节点6', parentId: 3 },
];
1
2
3
4
5
6
7
8

接下来，您可以使用以下代码将此平铺的数据转换为树形结构：

function buildTree(data, parentId = 0) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].parentId === parentId) {
      const children = buildTree(data, data[i].id);
      if (children.length > 0) {
        data[i].children = children;
      }
      result.push(data[i]);
    }
  }
  return result;
}
const treeData = buildTree(data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过以上代码，您将获得一个根据id处理后的树形结构数据treeData。

最后，您可以将treeData作为el-tree组件的数据源进行渲染。在el-tree中，只需将treeData绑定到data属性即可：

<el-tree :data="treeData"></el-tree>
1

这样，el-tree就会根据提供的数据treeData自动生成树形结构。