懒加载下el-cascader级联选择器实现回显

ElementUI中级联选择器如果是懒加载模式下，单纯赋值级联的数组是没办法回显的，因为无法获取下一级的数据。记录一下遇到此场景的一种解决方案。

思路：通过回显的数组form.positioning，加载并选中该数组在级联选择器中的位置，并拼接名字放到 placeholder 里。

效果如下

// html
<el-cascader :props="cityProps" :options="cityList" v-model="form.positioning" :placeholder="positioningName" style="width: 100%;"></el-cascader>

//js
<script>
export default {
    data(){
        return {
            cityList: [],
            cityProps: {
                label: 'name',
                value: 'id',
                lazy: true,
                lazyLoad: this.getNext
      },
          positioningName: ''
        }
    }
    methods: {
        reshowPositioning(positioning) {
          let promiseArr = []
          let cityList = []
          for(let i=0;i<positioning.length;i++) {
            // 获取下一层级调用的接口，可以根据自身的情况放入链式调用的接口，我这里是一样的所以    直接push
            promiseArr.push(this.getCityList(positioning[i]))
          }
          Promise.all(promiseArr).then(res=>{
            let pointerInd = null
            let obj = null
            res.forEach((item,index)=>{
              if(item.data.code == 200 ) {
                if(index===0) {
                  cityList = item.data.data
                  pointerInd = item.data.data.findIndex(ele=> ele.id ==         positioning[index+1])
              obj = cityList[pointerInd]
              this.positioningName = obj.name
            }
            else {      
              if(pointerInd && positioning[index+1]) {
                pointerInd = item.data.data.findIndex(ele=> ele.id == positioning[index+1])
                obj.children = item.data.data
                obj = obj.children[pointerInd]
                this.positioningName = this.positioningName + "/" +obj.name
              }
            }
          }
        })
          }).then(_=>{
            this.cityList = cityList
          })
        },
        getCityList(value) { 
          return this.$http.post(`/city/getList`,{
            pid: value ? value : 0
          })
        },
        getNext(node,resolve) { //lazyLoad的回调
          const {value} = node
          this.$http.post(`/city/getList`,{
            pid: value ? value : 0
          }).then(res=>{
            if(res.data.code == 200) {
            // 这里要注意，因为选中路径的各级列表已经加载过了，所以再加载时传[]，避免数据重复
              if(this.form.positioning 
                && this.form.positioning.includes(value)) 
                resolve([])
              else resolve(res.data.data)
            }
          })
        },
    },
    mounted(){
        this.reshowPositioning(this.form.positioning)
    }
}
</script>