最近项目中,要用到element-ui的无限级分类菜单，根据角色生成不同的递归数据，查阅了网上很多资料，发现很多都不太完整并且没有很多的延伸性。
梳理递归数据
梳理递归数据我们一般拿到后台的数据是：1.扁平化数据格式2.递归式数据格式

let arr = [
{

name:小七,

id:1
},
{

name:小八,

id:2
},
{

name: 小九,

id:3
}
]

let arr = [
{

name:小七,

id:1
},
{

name:小八,

id:2
},
{

name: 小九,

id:3
}
]
我们从后台拿到的是这种扁平化处理数据，那我们实现递归菜单的话需要什么数据格式呢，需要格式如下：
let menuItems = [
{

name:小七,

id:1,

children:[

{

name: '啥也不是',

pid:2

}

]
},
{

name:小八,

id:2,

children:[

{

name:'随便写哦',

pid:3,

children:[

{

name: '再次深入',

pid: 4,

children:[

{

name: '撒打算',

pid:666

}

]

}

]

}


]
},
{

name: 小九,

id:3
}
]


let menuItems = [
{

name:小七,

id:1,

children:[

{

name: '啥也不是',

pid:2

}

]
},
{

name:小八,

id:2,

children:[

{

name:'随便写哦',

pid:3,

children:[

{

name: '再次深入',

pid: 4,

children:[

{

name: '撒打算',

pid:666

}

]

}

]

}


]
},
{

name: 小九,

id:3
}
]

我们就需要类似于以上的这种数据格式：
扁平化数据转换递归数据，下面贴出我的数据处理方法：
注：应为在网上看到的许多的递归处理方法都不一样，有的文章写于很早很多方法都比较复杂或者代码比较多余

computed: {

treeData() {

let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 对源数据深度克隆

return cloneData.filter(father => {

let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一项的子级数组

branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级，则给父级添加一个children属性，并赋值

return father.pid == 0; //返回第一层

});

}
},

computed: {

treeData() {

let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 对源数据深度克隆

return cloneData.filter(father => {

let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一项的子级数组

branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子级，则给父级添加一个children属性，并赋值

return father.pid == 0; //返回第一层

});

}
},
其中this.tableData就是后台给到我的扁平化数据，这里将其替换就可以
当时处理此功能时没有考虑到子级或者父级有可能值位udfriend 所以没有做判断，如果想完善此递归数据处理的可以完善一下。
数据处理就要开始写代码了！
数据处理就要开始写代码了！这里用到了vue-ement-ui的左侧菜单老规矩，程序员交流用代码
index.vue


background-color="#304156"

text-color="#fff"

active-text-color="#409eff"

:collapse="isActive"

:collapse-transition="false"

:unique-opened="true"

:router="true"

:default-active="activePath"

>







这里的激活样式用的是缓存的办法

// 保存链接的激活状态

saveNavStart(activePath) {

window.sessionStorage.setItem("activePath", activePath);

this.activePath = activePath;

},

created() {

this.activePath = window.sessionStorage.getItem("activePath");

}


background-color="#304156"

text-color="#fff"

active-text-color="#409eff"

:collapse="isActive"

:collapse-transition="false"

:unique-opened="true"

:router="true"

:default-active="activePath"

>







这里的激活样式用的是缓存的办法

// 保存链接的激活状态

saveNavStart(activePath) {

window.sessionStorage.setItem("activePath", activePath);

this.activePath = activePath;

},

created() {

this.activePath = window.sessionStorage.getItem("activePath");

}
menuTree.vue组件
实现左侧无限级菜单最重要的就是 组件自身调用自身
废话不多说，上代码:


methods:{

saveNavStart(activePath) {

this.$emit('saveNavStart',activePath)

}

}
}


methods:{

saveNavStart(activePath) {

this.$emit('saveNavStart',activePath)

}

}
}到此就实现了左侧菜单的无限级了，应为现在给公司写的项目都是权限功能，路由方面呢大家可以随便写，公司项目做了权限：左侧菜单，按钮限制，菜单限制，接口限制目前是四种。
本人只是一个小白，分享在项目中遇到的问题，在百度没有找到好的方法，踩坑分享出来。