el-cascader 联级框动态懒加载数据
html中
1 <el-cascader 2 v-if="isShowAddressInfo" 3 ref="addressRef" 4 v-model="address" 5 :props="cascaderProps" 6 @change="visibleChange" 7 :show-all-levels="true" //回显完整的地址，false则只回显镇 8 size="small" 9 clearable 10 />
js中
1 //computed 里面 2 computed: { 3 cascaderProps() { 4 return { 5 lazy: true, 6 lazyLoad: this.lazyLoad, 7 } 8 }, 9 }, 10 11 // method里面 12 methods: { 13 visibleChange() { 14 // 当使用clearable清空的时候，只能清空搜索栏里的内容，但不能使下拉框中的内容也恢复成初始，因此需要ref 15 if (this.address.length === 0) { 16 let codeRef = this.$refs.addressRef 17 codeRef.panel.activePath = [] 18 codeRef.panel.loadCount = 0 19 codeRef.panel.lazyLoad() 20 } 21 }, 22 async lazyLoad(node, resolve) { 23 let level = node.level 24 let result 25 switch (level) { 26 case 0: // 类型 27 let initRes = await getAdressCode() 28 result = initRes.data 29 result.forEach((item) => { 30 item.value = item.divisionCode 31 item.label = item.divisionName 32 }) 33 // result = [ 34 // { value: '北京', label: '111' }, 35 // { value: '上海', label: '222' }, 36 // { value: '深圳', label: '333' }, 37 // ] 38 break 39 case 1: //一级目录 40 let firstParams = { 41 provinceCode: node.data.value 42 } 43 let firstRes = await getAdressCode(firstParams) 44 result = firstRes.data 45 result.forEach((item) => { 46 item.value = item.divisionCode 47 item.label = item.divisionName 48 }) 49 break 50 case 2: // 二级目录 51 let secondParams = { 52 cityCode: node.data.value 53 } 54 let secondRes = await getAdressCode(secondParams) 55 result = secondRes.data 56 result.forEach((item) => { 57 item.value = item.divisionCode 58 item.label = item.divisionName 59 }) 60 break 61 case 3: 62 // 三级目录 63 let thirdParams = { 64 areaCode: node.data.value, 65 } 66 let thirdRes = await getAdressCode(thirdParams) 67 result = thirdRes.data 68 result.forEach((item) => { 69 item.value = item.divisionCode 70 item.label = item.divisionName 71 item.leaf = level >= 3 72 }) 73 break 74 default: 75 result = [] 76 break 77 } 78 resolve(result) 79 },
