element-ui Cascader级联选择框 回显问题

element的Cascader，好用是好用。但是，对于后台接口只保存了选中那一项的数据来说，回显来说是个问题。

问题

1. 级联框回显

解決

1. 解决回显问题，首先要了解回显的要求，
   api并没有对value格式有要求，但是我一般用数组盛放，所以我的格式是：[1,2,3,4]，这种，选择完成后是每一级选择的value，但是要保存的不一定是全部，可能只是数组最后一位，比如省市级这种，可能最后只要市级就足够。所以接口返回的就只有市级id。我的思路是，将省市级再次传进去，通过id来找到对应的市级，然后反向遍历出他的从属关系：

// 寻找从属关系公共方法
export function regroupCascaderData(
  id, //要寻找的唯一值
  data, // 列表总数据
  key = 'label', //列表总数据 的key
  val = 'value', //列表总数据 的value
  list = 'children' //列表总数据 下属关系的key
) {
  let _allObj = {}
  const _allArr = []
  const setData = function(data) {
    let Obj
    for (const item of data) {
      Obj = {
        [key]: item[key],
        [val]: item[val]
      }
      if (item[val] == id) {
        Obj['isOk'] = true //如果条件符合，接下来就不会再判断
        return Obj
      } else if (item[list] && item[list].length) {
        Obj[list] = setData(item[list])
        if (Obj[list] && Obj[list]['isOk']) {
          Obj['isOk'] = true
          return Obj
        }
      } else {
        Obj = null
      }
    }
    return Obj
  }
  const getObjData = function(data) {
	// 递归向数组中填充数据 
    _allArr.push(data[val])
    if (data[list]) {
      getObjData(data[list])
    }
  }
  _allObj = setData(data)
  getObjData(_allObj)
  return {
    Obj: _allObj,
    arr: _allArr
  }
}

·调用：

data(){
	this.form = {
		floor_id:1
	}
	this.areaList:[]
}
	
	const arr = regroupCascaderData(
        'floor_' + this.form.floor_id,
        this.areaList,
        'name',
        'eid',
        'list'
      )
      this.floor = arr['arr'] //this.floor就是级联框绑定的数组了 

注意，寻找所属关系时，必须要有唯一id，不然会等级乱掉。或者可以通过遍历，手工为数据生成一条唯一id，详情可以参考代码；其实最好还是全部存储，数据库取的时候，全部取出再拿最后一个就行了，相比起来遍历数据要麻烦的多了。