关于菜单递归处理

最近做了一个需求，要求菜单左右展示，左边el-tree，右边el-table,el-table展示菜单， 添加属性：
<el-table v-loading="loadingMenu" :data="menuData" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" >

模板很简单，难点在于树状结构数据的处理， 由于表格里面还有操作项，接口把操作项数据统统反在一棵树的children里面，导致右边菜单展示了操作项内容
解决方案： 由于左右菜单属于互相依赖关系，数据可以引用，点击左边菜单的时候，过滤操作项的数据：
首先过滤第一层数据，通过叶子节点判断是否菜单isLeafPage=1，即children是操作项， children清空，并把children赋值给新的操作项数组。

再过第二层的children，逻辑同上： 判断是否叶子节点，判断children是否存在 ，否则调用自身继续遍历
最后得到一个新的数组return出去，这里为了更好的引用，不需要return，直接更改node数据

dealNode(node) {
      if (node.menuType === 0 && node.children) {
        if (node.isLeafPage) {
          node.operateDetails = node.children
          node.children = []
        }
        for (let i = 0; i < node.children.length; i++) {
          if (node.children[i].isLeafPage) {
            if (node.children[i].children.length > 0) {
              node.children[i].operateDetails = node.children[i].children
              node.children[i].children = []
            }
          } else {
            this.dealNode(node.children[i])
          }
        }
      }
    },

提交数据的时候倒过来写个递归函数遍历大树，结束！
总结： 判断第一层的叶子节点， 判断第二层的children， 遍历children,判断叶子节点！