An empty cascade bug was found while using the Element-UI cascade selector

First of all, we analyze the reason for empty cascade: because the data is transferred from the background, when the old iron at the back end uses recursion to calculate the menu, and then converts it into JSON and passes it to the front end. You get an empty array of children in the bottom item, and you get the empty cascade bug.

HTML part

      <el-cascader
      :options="menuTree"
      v-model="form.parentId"
      :props="{ emitPath: false, expandTrigger: 'click',checkStrictly: true,value: 'id',label: 'name',children: 'childrens' }"
      clearable>
      </el-cascader>
      
Copy the code

JavaScript part

GetAllMenuTree () {this.$API ({url: 'getAllMenuTree' }).then(res => { this.menuList = Object.assign([], res.data) function clear (arr) { arr.map(i => { if (i.childrens.length === 0) { delete i.childrens } else { Clear (i.childrens)}})} // Call the recursive method, Assign the data to the selector this.menutree = this.getTreeData(res.data)})}, GetTreeData (data) {for (var I = 0; i < data.length; I ++) {if (data[I].childrens. Length < 1) {// children Childrens = undefined data[I]. Childrens = undefined} else {// childrens This.gettreedata (data[I].childrens)}} return data}Copy the code

The effect picture after the solution