element-ui cascader(级联选择器)组件使用心得

最近公司项目需求需要用到级联选择功能，第一次遇到这个功能，因为本身项目就用的element-ui，所以就去官方组件库找了找有没有这种组件，发现果然有这个组件

 

直接复制的官方代码到项目里，一切正常的运行起来了，接下来就是调接口拿数据，返回的数据如下图所示：

成功拿到数据，接下来就是赋值了，先直接换上试试

this.selectData = response.data

此时，发现页面组件已经渲染成功，显示似乎也没有问题，随便点了点试试，发现了第一个bug，列表虽然展示出来了，但本来的三级联动居然出现了四级，第四级出现一个暂无数据，导致选择失败，和之前复制官方的实例不一样，如图：

 

仔细去看了看后台返回的数据，发现最后一级子集还会携带一个返回空的children属性，如图：

 

这是一个三级联动，第一级和第二级有children理所当然，但是第三极已经是最后一级了，本不应该出现children，cascader组件是根据有没有children属性来判断是否还有下级，这样返回数据就会造成多出显示暂无数据的第四级，问题找到了，现在解决问题，找到了后台同事沟通，后台说解决不了这种问题（咱也不懂Java，咱也不敢问...），那就前端处理吧

let resData = response.data[0].children
for(let i = 0; i < resData.length; i++){
  for(let v = 0; v < resData[i].children.length; v++){
    if(resData[i].children[v].children.length == 0){
      delete resData[i].children[v].children
    }
  }
  if(resData[i].children.length == 0){
    delete resData[i].children 
  }
}

两次循环去掉多余的children属性，此番操作过后，多出来的第四级已经消失了，点击选择一个选项之后，第二个bug出现了，点击一个选项之后，所有的选项后面都被打上了√，在一番研究之后，感觉应该是选中项没有唯一的标识，翻阅官方实例发现他的数据格式是由value，label，children三项组成

 这个value应该是唯一的标识，后台返给我的数据里面没有value这个key，所以我尝试把返回的id改成value

this.selectData = res.map( item => { return {
  value:item.id,
  label:item.label,
  children:item.children,
}})

此番操作之后，遇到的第二个bug也已经解决了，点击任意选择也没有问题，目前前端展示已经完成

 

接下来就是把选中的选项传给后台了，查了查官方文档，有一个选中时触发的事件

放在项目里试了试，发现点击之后，他返回的是选择的三级每一级的value值，这样就能传给后台了，后台只要第二级和第三级，因为第一级是固定唯一的，直接定义俩值穿过去就行

handleChange(value) {
  this.factoryId = value[2];
  this.areaId = value[1];
},

 现在这个三级联动的组件就做完了，第一次用，虽然有bug，但总体感觉还行，嘿嘿嘿