微搭平台中树的创建（多级目录）

对于微搭平台中树的创建就是我们平常多级目录的动态渲染

1.这部分的代码就是实现树创建的核心JS代码

export default async function({event, data}) {
//传入的数据参数就是数据源里面的数据
  const datas = $w.queryCatalogue.data;
  console.log("datas:",datas);
//判断数据是否存在
  if(datas && datas.total>0) {
    const arr = datas.records;
    const tree = arrayToTree2(arr);
    console.log("tree:",tree);
//这里的treeshow就是我们自定义的数组变量
    $w.page.dataset.state.treeShow = tree;
  }
}

function arrayToTree(arr, sjml = null) {
  const tree = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].sjml === sjml) {
      const children = arrayToTree(arr, arr[i].bmbm);
      if (children.length) {
        arr[i].children = children;
      }
      tree.push(arr[i]);
    }
  }
  return tree;
}

function arrayToTree2(arr) {
  const map = {};
  const tree = [];
  for (let i = 0; i < arr.length; i++) {
    const currNode = arr[i];
    currNode.children = [];
    currNode.label = currNode.mlmc;
    currNode.value = currNode.bmbm;
    map[currNode.bmbm] = currNode;
    if (currNode.sjml==null || currNode.sjml=="" || currNode.sjml=="lx0001") {
      tree.push(currNode);
    } else {
      const parentNode = map[currNode.sjml];
      parentNode.children.push(currNode);
    }
  }
  return tree;
}

2.同时在树状组件中选中节点改变时立刻执行以下表达式来判断是否是目录，并且可以拿到点击节点的各种内容，代码中的是值，我们也可以拿到名字等等。

({event}) => {
    const children = event.detail.currentNode[0].children;
    console.log('value',event.detail.currentNode[0].value);
    if(children && children.length>0) {
        console.log('是否目录：是');
    }else {
        console.log('是否目录：不是');
    }
  
}

步骤：

1.首先创建微搭数据表查询，选择数据表是我们想要的渲染在树节点的数据源，选择手动触发执行，条件根据需求进行选择。

2.在树的容器上调用数据查询，成功时调用我们的核心代码

3.新建一个自定义数组变量treeShow在树节点的数据中绑定$w.page.dataset.state.treeShow，在树节点改变时调用上述的立刻执行表达式。

 不懂的或者有错误的地方可以评论交流或者私信，看到都会回复的。