渲染树形菜单，有很多的后台数据，怎么筛选

首先根据element-ui中的典型树形菜单结构图

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]">
</el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: '一级 2',
          children: [{
            id: 3,
            label: '二级 2-1',
            children: [{
              id: 4,
              label: '三级 3-1-1'
            }]
          }, ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

我们请求后端数据后得到的打印结果为：

怎么只保留date中的[{id,label,children}]
递归加循环实现：

getId(treeData) { // treeData是后台获取的对象
      let arr=[] // 用来对数据遍历 返回满足要求的树形菜单数据
      treeData.forEach(ele => {
        // 判断有子元素,并且子元素的长度大于0就再次调用自身
        if (ele.children && ele.children.length > 0) {
        // 依次把符合的push进数组
          arr.push({
            id:ele.id,
            label:ele.name,
            children:this.getId(ele.children)
          })
        }else{
          arr.push({
            id:ele.id,
            label:ele.name
          })
        }  
      })
      console.log(arr)
      return arr
    }

然后 this.data=我们return的arr即可实现
结果页面：

第二种类型

后台数据是以下情况，子父节点的连接靠的是parentId,怎么变成chrildren这种类型的数据结构

SetFunctionPermissions(row){
      this.SettingPermission = true;
      this.SettingPermissionId = row.id;
      this.FirstcheckkeysId = this.checkkeysId.filter(item=>item)
      // 获取所有权限
      this.get(
         '/api/system/permission/all',{},
         (res) => {
           if (res.success === 'true') {
             this.permissionDataone = res.data
             console.log('this.permissionDataone',this.permissionDataone)
             this.permissionDataone =  this.permissionDataone.map(item=>{
               if(item.parentId==0){ // 找到第一级
                 return this.DgPermission(item)//递归遍历每一级中的children
               }
             })
           } else {
             this.$message.error(res.msg);
           }
         }
       );
      }
DgPermission(obj){ // 递归筛选数据
      this.permissionDataone.forEach(item=>{
        if(item.parentId == obj.id){
          obj.children =obj.children ? obj.children: [] // children缓存
          obj.children.push(this.DgPermission(item))
        }
      })
      let arr =this.permissionDataone.filter((item)=>{
        item.parentId == obj.id
      })
      if(arr.length==0){
        return obj
      }
    },

方法升级

	
	/**
	 * 构造树型结构数据
	 * @param {*} data 数据源
	 * @param {*} id id字段 默认 'id'
	 * @param {*} parentId 父节点字段 默认 'parentId'
	 * @param {*} children 孩子节点字段 默认 'children'
	 * @param {*} rootId 根Id 默认 0
	 */
	export function handleTree(data, id, parentId, children, rootId) {
		id = id || 'id'
		parentId = parentId || 'parentId'
		children = children || 'children'
		rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
		//对源数据深度克隆
		const cloneData = JSON.parse(JSON.stringify(data))
		//循环所有项
		const treeData = cloneData.filter(father => {
			let branchArr = cloneData.filter(child => {
				//返回每一项的子级数组
				return father[id] === child[parentId]
			});
			branchArr.length > 0 ? father.children = branchArr : '';
			//返回第一层
			return father[parentId] === rootId;
		});
		return treeData != '' ? treeData : data;
	}

使用： this.deptList = this.handleTree(response.data, "parentId");