摘要:
开发中经常会遇到一些组件需要的特定数据结构,后端不一定会返回你需要的数据结构的,所以还是要前端来处理的!这里来总结一下平常开发中遇到的需要处理结构的方法,下次遇到直接拿来用就可以了!
目录概览
- el-tree根据id处理成树形结构数据
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 },
];
接下来,您可以使用以下代码将此平铺的数据转换为树形结构:
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);
通过以上代码,您将获得一个根据id处理后的树形结构数据treeData。
最后,您可以将treeData作为el-tree组件的数据源进行渲染。在el-tree中,只需将treeData绑定到data属性即可:
<el-tree :data="treeData"></el-tree>
这样,el-tree就会根据提供的数据treeData自动生成树形结构。