在Vue应用中，使用el-cascader组件实现动态加载数据，并处理回显问题。通过设置`lazy`属性为true实现级联选项的按需加载。在不同层级（level 0, 1, 2）调用API获取子节点数据，并通过`resolve`回调传递给组件。同时，利用v-model绑定的`partyOrganId`来展示已选择的值。"
15502119,1399166,Perl脚本创建MySQL表时中文字段乱码问题解决方案,"['perl脚本', 'mysql数据库', '字符编码']
页面
v-model="partyOrganId"
:placeholder="partyOrganName"
:props="prop"
:show-all-levels="false"
class="font_pla"
>
data() {
return {
partyOrganId: [],
prop: {
lazy: true,
lazyLoad(node, resolve) {
setTimeout(() => {
if (node.level == 0) {
axios({
method: "get", //请求方式
url: "/api/commonUser/findByChildRegion", //请求地址
params: {
regionCode: "330000"
}
})
.then(res => {
const cities = res.data.data.map((value, i) => ({
value: value.regionCode,
label: value.regionName,
leaf: node.level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(cities);
})
.catch(err => {
console.log(err);
});
}
if (node.level == 1) {
axios({
method: "get", //请求方式
url: "/api/commonUser/findByChildRegion", //请求地址
params: {
regionCode: node.value
}
})
.then(res => {
const areas = res.data.data.map((value, i) => ({
value: value.regionCode,
label: value.regionName,
leaf: node.level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(areas);
})
.catch(err => {
console.log(err);
});
} else if (node.level == 2) {
axios({
method: "get", //请求方式
url: "/api/commonPartyOrgan/getPartyOrganInfo", //请求地址
params: {
cityCode: node.path[0],
areaCode: node.path[1]
}
})
.then(res => {
const partys = res.data.data.map((value, i) => ({
value: value.id,
label: value.name,
leaf: node.level >= 2
}));
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(partys);
})
.catch(err => {
console.log(err);
});
}
}, 1000);
}
}
};
},
扫一扫
2566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
