1.效果图
2.HTML
<el-dialog v-model="dialogVisible"
title="请选择服务地区"
width="30%">
<el-cascader v-model="value"
:props="props"
@change="handleChange"
style="width:100%"
placeholder="请选择服务地区" />
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary"
@click="dialogVisible = false">
确定
</el-button>
</span>
</template>
</el-dialog>
3.js
//准备数据
let options = reactive([])
let dialogVisible = ref(false)
//控制弹层
const area = ()=>{
dialogVisible = true
}
//初始化省数据
const getAreaData = ()=>{
// 1. 创建ajax对象(异步对象)
let xhr = new XMLHttpRequest();
// 2. 创建请求
// xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
xhr.open("GET", "http://120.26.94.63:8000/api/sysOrg/1",true);
// 3. 发送请求
xhr.send();
// 4. 监听状态,接收响应
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的请求状态 readyState ;与服务器响应的状态 status
if (xhr.readyState === 4&& xhr.status === 200) {
// 4.2 使用xhr.response 获取服务器返回的数据
if(JSON.parse(xhr.response).code== 0){
let areaData = JSON.parse(xhr.response).data;
let result = areaData.map(item => ({
value:item.id,
label:item.name,
count:item.count,
parentid:item.parentid,
children:[]
}))
options = result
}
}
}
}
//el-cascader层级选择器 动态加载数据
let props = {
lazy: true,
checkStrictly: true,
lazyLoad(node, resolve) {
let { level } = node
setTimeout(() => {
if(node.level == 0){
getAreaData()
// 将后端返回的数据处理成组件需要的数据
let nodes = Array.from(options).map((item) => ({
value: item.value,
label: item.label,
parentid: item.parentid,
leaf: node.level >= 2,
}))
resolve(nodes)
}else{
//省市区地区无限连级
// 1. 创建ajax对象(异步对象)
let xhr = new XMLHttpRequest();
// 2. 创建请求
// xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
xhr.open("GET", `http://120.26.94.63:8000/api/sysOrg/${node.value}`,true);
// 3. 发送请求
xhr.send();
// 4. 监听状态,接收响应
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的请求状态 readyState ;与服务器响应的状态 status
if (xhr.readyState === 4&& xhr.status === 200) {
// 4.2 使用xhr.response 获取服务器返回的数据
if(JSON.parse(xhr.response).code== 0){
let areaData = JSON.parse(xhr.response).data;
let result = areaData.map(item => ({
value:item.id,
label:item.name,
count:item.count,
parentid:item.parentid,
children:[],
}))
options = result
let nodesChildren = Array.from(options).map((item) => ({
value: item.value,
label: item.label,
parentid: item.parentid,
leaf: item.count == 0, //当当前数据中字段count == 0时,表示当前叶子节点为最后一项
}))
resolve(nodesChildren)
}
}
}
}
}, 1000)
},
}