在软件开发中，树形结构是比较常见的，我们在微搭中如何体现树形结构呢？
1 创建数据源
我们可以通过数据源来存储树形结构的数据
在设计树形结构的数据源中，我们设计了一个父部门ID的字段，这个字段用来存储父部门的数据标识
2 准备数据
数据源搭建好了之后，我们需要准备数据，这里我们准备了四条数据
需要注意的是根节点的数据我们是不填写父部门ID的
3 创建API
为了获取树形结构的数据，我们需要创建API来完成数据的获取工作。
这里我们使用了自定义代码来完成数据的获取，在编辑器里输入如下的代码
module.exports = async function (params, context) {const departments = await context.callModel({name: 'department_ywrtj83',methodName: 'wedaGetRecordsV2',params: {filter: {where: {$and: [{}]},},orderBy: [{ level: "asc" },{ order: "asc" }],select: { $master: true },getCount: true,pageSize: 200,pageNumber: 1},});// 构建一个映射来存储所有部门const deptMap = {};departments.records.forEach(dept => {deptMap[dept._id] = {label: dept.name,value: dept._id,children: [],disabled: dept.disabled || false};});// 构建树形结构const tree = [];departments.records.forEach(dept => {const node = deptMap[dept._id];if (dept.parentid && dept.parentid !== "" && deptMap[dept.parentid]) {deptMap[dept.parentid].children.push(node);} else {tree.push(node);}});// 清理空的 children 数组const cleanTree = (node) => {if (node.children.length === 0) {delete node.children;} else {node.children.forEach(cleanTree);}return node;};const finalTree = tree.map(cleanTree);return { tree: finalTree };};
代码分为几个步骤：
第一步是通过分页方法获取我们的数据
const departments = await context.callModel({name: 'department_ywrtj83',methodName: 'wedaGetRecordsV2',params: {filter: {where: {$and: [{}]},},orderBy: [{ level: "asc" },{ order: "asc" }],select: { $master: true },getCount: true,pageSize: 200,pageNumber: 1},});
改版之后，获取数据的时候尽量使用数据模型的V2方法，比较灵活
第二步是自定义一个Map的数据，数据的结构是将数据标识作为键，按照组件要求的返回值构造值
const deptMap = {};=> {= {label: dept.name,value: dept._id,children: [],disabled: dept.disabled || false};});
第三歩是构造树形结构，这里的逻辑是去看当前节点是否是根节点，如果是就放入数组中，如果不是就将节点放到对应节点的父节点的children数组中
const tree = [];departments.records.forEach(dept => {const node = deptMap[dept._id];if (dept.parentid && dept.parentid !== "" && deptMap[dept.parentid]) {deptMap[dept.parentid].children.push(node);} else {tree.push(node);}});
最后一步是清理叶子节点，因为我们叶子节点就是最底了，将chilren属性删除
const cleanTree = (node) => {if (node.children.length === 0) {delete node.children;} else {node.children.forEach(cleanTree);}return node;};const finalTree = tree.map(cleanTree);
数据处理完毕我们返回我们的结果，使用了return语句
4 应用中调用API
在应用中，我们通过外部API来调用我们刚刚创建好的
有了数据之后，将数据绑定到树形组件就完成了整体功能的开发
最终的效果
打开应用，可以看到数据以一棵树的形式进行了展示，有不同的层级，可以展开和关闭
总结
我们本篇讲解了一下树形组件的具体用法，涉及到建立数据源，开发API，在应用中调用API以及数据绑定的相关知识。树形组件用处还是挺多的，比如我们的权限系统中的部门管理，再比如我们在小程序中的多级分类展示，都会用到这块的知识点，熟练掌握每一个知识点，串起来就形成了我们具体的应用。
