基于element ui的el-cascader创建请一个三级地址选择
创建地址组件mz-address-select
<template>
<el-cascader :style="{width:width}" :placeholder="placeholder" v-model="tempAddress" :options="addressList"
:props="optionProps" @change="addressChangeHandle"></el-cascader>
</template>
<script>
export default {
props: {
//回显值
value: {
type: Array,
default: () => {
return []
}
},
//设置宽度
width: {
type: String,
default: "100%"
},
placeholder: {
type: String,
default: "请选择地址"
}
},
data() {
return {
addressList: [], //地址数据
optionProps: {
value: 'value',
label: 'label',
children: 'children',
expandTrigger: 'click'
}, //配置项
tempAddress: [], //临时地址
}
},
watch: {
value: {
handler(value) {
console.log("[监听到的值]", value)
this.tempAddress = value;
}, //监听函数
deep: true, //深度监听
immediate: true, //立即执行
}
},
mounted() {
this.addressListAPI();
},
methods: {
/**
* 选择地址
* **/
addressChangeHandle(params) {
this.$emit("change", params)
},
/**
* 获取地址数据
* address.json我在uniapp中使用picker制作简单的三级地址选择组件 中有数据
* **/
addressListAPI() {
this.requestAPI("https://xxxx.com/address.json", (response) => {
this.dealWithAPIData(response.res).then(res => {
this.addressList = res;
});
})
},
/**
* 整理接口数据
* **/
dealWithAPIData(data) {
return new Promise((resolve, reject) => {
if (data.length > 0) {
let tempData = [];
data.map(item => {
if (item.cityList.length > 0) {
tempData.push({
value: item.id,
label: item.name,
children: item.cityList.map(city => {
return {
value: city.id,
label: city.name,
children: city.areaList.map(area => {
return {
value: area.id,
label: area.name,
}
})
}
})
})
} else {
tempData.push({
value: item.id,
label: item.name,
children: [{
value: item.id,
label: item.name,
children: [{
value: item.id,
label: item.name,
}]
}]
})
}
})
resolve(tempData);
} else {
reject([]);
}
})
},
/**
* API请求
* **/
async requestAPI(url, callback) {
const xhr = await new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且响应成功
const data = JSON.parse(xhr.responseText); // 解析响应数据为 JSON 对象
callback(data);
}
};
xhr.send();
}
}
}
</script>
<style lang="scss" scoped>
</style>
直接在页面中注册组件或者main.js中全局注册