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){

          //方法

        }

    }
}