【VUE+Elemet】对于el-cascader多级联动的扩展功能+解决隐藏问题

1、多级联动的回显问题

• 想要回显成这个样子，需要后台给这三个id，然后初始时走三个接口；以此类推，可以走多个接口，获取多级。 

•  上代码

<el-cascader v-model="form.area" placeholder="请选择" clearable  ref="refArea"
          :options="areas" :show-all-levels="true" @change="handleChangeColumn"
            @active-item-change="handleItemChange" filterable>
          </el-cascader>

let params = {}; 
        params = {
          id: '1'
        }
        areaTreeList(params).then(res => {
          if (res.data.code == 0) {
        var ones1 = res.data.data.list
        this.areas = ones1.map((value, i) => {
            return {
              value: value.id,
              label: value.name,
              children: []
            }
        })
        //第二个   
        params = {
          id: areas.substring(0,2) 
        }
        areaTreeList(params).then(res => {
          if (res.data.code == 0) {
            var ones2 = res.data.data.list
        this.areas.map((value, i) => {
          if (value.value == areas.substring(0,2)) { // 遍历数据源=选中            
            if (!value.children.length) {                   
              value.children = ones2.map((value, i) => {
                  return {
                    value: value.id,
                    label: value.name,
                    children: []
                  }
              })
            }
          }
        })
        //第三个 
        params = {
          id: areas.substring(0,4)  
        }
        areaTreeList(params).then(res => {
          if (res.data.code == 0) {
            var ones3 = res.data.data.list 
        this.areas.map((value, i) => {
          if (value.value == areas.substring(0,2)) {
            value.children.map((value, i) => {
              if (value.value === areas.substring(0,4)) {
                if (!value.children.length) {
                  value.children = ones3.map((value, i) => {
                      return {
                        value: value.id,
                        label: value.name,
                      }
                  })
                }
              }
            })
          }
        })
          }
        })
          }
        })   
        }
        })