ElementUI——级联和树形省市区

项目中有用到省市区选择，我们是三个接口获取数据的，在此记录一下级联和树形的区别：

级联HTML：

<el-cascader :props="region"></el-cascader>

级联JS：

region: {
                lazy: true,
                lazyLoad(node, resolve){
                    if(node.level === 0){
                        getProvince().then(val =>{
                            if (val.code == 200) {
                                const nodes = val.data.map(res =>({
                                    label: res.name,
                  level: node.level,
                  value: res
                                }))
                                resolve(nodes)
                            }
                        }).catch(val=>{
                            console.log(val)
                        })
                    }else if(node.level === 1){
                        getCity(node.data.value.provinceId).then(value =>{
                            const nodes = value.data.map(res => ({
                                label: res.name,
                                level: node.level,
                                value: res
                            }))
                            resolve(nodes)
                        })
                    }else if(node.level === 2){
                        getCountry(node.data.value.cityId).then(value => {
                            const nodes = value.data.map(res => ({
                                label: res.name,
                                leaf: node.level,
                                value: res
                            }))
                            resolve(nodes)
                        })
                    }else if(node.leve === 3){
                        resolve([])
                    }
                }
            },

树形HTML：

<el-tree
            ref="tree"
            :props="props"
            :load="loadNode"
            lazy
            node-key="id"
            highlight-current
            :default-expanded-keys="[1]"
            @node-click="handleNodeClick"
          />

树形JS：

// 树形
data(){
    return {
        props: {
            id: 1,
            label: 'name',
           childern: 'zones'
        }
     }
},
methods:{
    loadNode(node, resolve) {
      if (node.level === 0) {
       //默认打开第一级（id: 1）
        return resolve([{ name: '单位列表', level: node.level, id: 1 }])
      } else if (node.level === 1) {
        getProvince()
          .then(val => {
            // console.log(val);
            if (val.code === 200) {
              const nodes = val.data.map(res => ({
                name: res.name,
                level: node.level,
                value: res
              }))
              resolve(nodes)
            }
          })
          .catch(val => {
            this.$message.error(val)
          })
      } else if (node.level === 2) {
        getCity(node.data.value.provinceId)
          .then(val => {
            if (val.code === 200) {
              const nodes = val.data.map(res => ({
                name: res.name,
                level: node.level,
                value: res
              }))
              resolve(nodes)
            }
          })
          .catch(val => {
            this.$message.error(val)
          })
      } else if (node.level === 3) {
        getCountry(node.data.value.cityId)
          .then(val => {
            if (val.code === 200) {
              const nodes = val.data.map(res => ({
                name: res.name,
                level: node.level,
                value: res
              }))
              resolve(nodes)
            }
          })
          .catch(val => {
            this.$message.error(val)
          })
      } else if (node.level === 4) {
        resolve([])
      }
    },

      handleNodeClick(data) {

         // console.log(data);

　　　　　if(data.level === 3){

          //方法

        }

    }
}