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

1、多级联动的回显问题

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

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

  •  上代码

          


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,
                      }
                  })
                }
              }
            })
          }
        })
          }
        })
          }
        })   
        }
        })   

 

 

你可能感兴趣的:(项目中的疑难问题,vue-web,vue)