vue+element 级联选择器开发 问题1:空白选择项 问题2:显示数据层次,我只想要三层结构?

vue+element级联选择器

问题1:空白选择项

**

原因:

由于后台返回数据包含children为空数组**(element级联选择器默认为children,可用属性更改)
导致出现空白页选择

处理方法:

贴代码

  // 递归处理child空数组情况(如果你们的是children,child换成children执行即可)
  handleEmptyData(data) {
    for (var i = 0; i < data.length; i++) {
      if (!data[i].child || data[i].child.length == 0) {
        data[i].child = undefined; // child若为空数组，则将child设为undefined
      } else {
        this.handleEmptyData(data[i].child); // child若不为空数组，则继续递归
      }
    }
    return data;
  }

问题2:显示数据层次

原因:

由于后台返回上万条数据包含街道小区,四层,而实际上需求只要求省市区前三个,element 本身没有提供属性控制

处理方法:

三层循环

贴代码

  delFourth(data) {
    for (var i = 0; i < data.length; i++) {
      if (data[i].child) {
        for (var j = 0; j < data[i].child.length; j++) {
              if(data[i].child[j].child){
                for (var k = 0; k < data[i].child[j].child.length; k++) {
                  data[i].child[j].child[k].child=[];
                }
              }
        }
      }
    }
    return data;
  },
  
  最后处理结果如下

有疑问可评论