解决Element-UI级联选择器出现空页面

解决Element-UI级联选择器出现空页面

问题

在使用Element-UI级联选择器Cascader组件时，当后端返回的树形结构中children为空数组时，级联选择器会出现一个空页面。图片如下：

正是因为这一个空的children数组，导致级联选择器出现空页面

解决

使用递归删除树形结构中的空数组。

getData(arr) {
      //第一层节点
      var newTree = new Array();
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].children.length == 0) {
          delete arr[i].children;
        } else {
          var sonTree = new Array();
          sonTree = arr[i].children;
          arr[i].children = this.getNodes(sonTree);
        }
        newTree.push(arr[i]);
      }
      return newTree;
    },
    getNodes(arr) {
      //递归子节点
      var sonList = new Array();
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].children.length == 0) {
          delete arr[i].children;
        } else {
          var sonTree = new Array();
          sonTree = arr[i].children;
          this.getNodes(sonTree);
        }
        sonList.push(arr[i]);
      }
      return sonList;
    },

说明：children为树形结构的子级，如果你的子级的名称定义的list或其他，将children改为你自己的便可。