In the recent project, I used the infinite classification menu of Element-UI, and generated different recursive data according to the role. I checked a lot of materials on the Internet, and found that many of them were incomplete and not very extensible.

Comb through the recursive data

The data we usually get in the background is: 1. Flat data format 2. Recursive data formatCopy the code
Let arr = [{name: small seven, id: 1}, {name: small eight, id: 2}, {name: Let menuItems = [{name: small seven, id:1, children:[{name: small seven, id:1, children:[{name: small seven, id:1, children:[{name: small seven, id:1, children:[{name: small seven, id:1, children:[{name: small seven, id:1, children:[{name: 'nothing', pid: 2}}, {name: small eight, id: 2, children: [{name: 'literally write oh, pid: 3, children: [{name:' deeply again, pid: 4, children: [{name: 'and to', pid: 666}]}}}]], {name: Small nine, id: 3}] we need is similar to the above data format: flat recursive data, posted below my data processing method: note: should be read on the Internet many recursive processing method is different, some articles written in many ways is more complex in early or code is redundantCopy the code
computed: { treeData() { let cloneData = JSON.parse(JSON.stringify(this.tableData)); Clonedata. filter(father => {let branchArr = cloneData.filter(child => father. Id == child.pid); BranchArr. Length > 0? (father.children = branchArr) : ""; // If there are children, add a children attribute to the parent and assign return father. Pid == 0; // return the first layer}); }}, where this.tableData is the flat data given to me by the background, and it can be replaced by it. At that time, when processing this function, we did not consider the possibility of udfriend value of child or parent, so we did not make a judgment.Copy the code

Data processing is about to start writing code!

Here we use the left menu of vue-ement UI as usual, where programmers communicate codeCopy the code

index.vue

<el-menu background-color="#304156" text-color="#fff" active-text-color="#409eff" :collapse="isActive" :collapse-transition="false" :unique-opened="true" :router="true" :default-active="activePath" > <menu-tree :menuData="treeData" @savenavStart ="saveNavStart"></menu-tree> </el-menu saveNavStart(activePath) { window.sessionStorage.setItem("activePath", activePath); this.activePath = activePath; }, created() { this.activePath = window.sessionStorage.getItem("activePath"); }Copy the code

MenuTree. Vue components

The most important thing to achieve the left infinite menu is the component itself to call itself without further ado, on the code: <template> <div> <label v-for="menu in menuData" :key="menu.id"> <el-submenu :index="String(menu.id)" v-if="menu.children"> <template slot="title"> <i class="el-icon-edit"></i> <span>{{menu.menu_name}}</span> </template> <label> <menutree :menuData="menu.children"></menutree> </label> </el-submenu> <el-menu-item :index="menu.path" @click="saveNavStart(menu.path)" v-else> <i class="el-icon-edit"></i> <span>{{menu.menu_name}}</span> </el-menu-item> </label> </div> </template> methods:{ saveNavStart(activePath) { this.$emit('saveNavStart',activePath) } } }Copy the code

To this achieved the left menu of infinite level, because now to the company to write the project are permissions function, routing we can write, the company project to do permissions: left menu, button restrictions, menu restrictions, interface restrictions are currently four.

I am just a little white, share the problems encountered in the project, in Baidu did not find a good way to step on the pit to share. What code problems can leave a message, a section will write a front-end monitoring management system, buried points, data, interface and so on, very practical. Bye byeCopy the code