<template>
<el-cascader
style="width: 90%"
v-model="areaList"
:props="propsdata"
:key="isResouceone"
is-leaf
@change="handleChangeAddress"
></el-cascader>
</template>
<script>
export default {
name: "xxx",
components: { },
data() {
return {
areaList: [], // 地区下拉框
isResouceone: false,
propsdata: {
// 懒加载地区列表
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
setTimeout(() => {
// 第一級
if (node.level == 0) {
// Ajax請求數據，填充選擇框
// 接口请求获取省份
getArea({ parentId: 0 }).then((response) => {
const nodes = response.data.map((item) => ({
value: item.id,
label: item.name,
leaf: node.level >= 1,
}));
resolve(nodes);
});
}
// 第二級
if (node.level == 1) {
// Ajax請求數據，填充選擇框，傳遞上一級參數
// 接口请求，传递上以一级参数
getArea({ parentId: node.value }).then((response) => {
const nodes = response.data.map((item) => ({
value: item.id,
label: item.name,
leaf: node.level >= 1,
}));
resolve(nodes);
});
}
}, 100);
},
},
}
}，
created() {
},
methods(){
handleChangeAddress(value){ // 更改时调用
}
},
}
</script>
elementUI中el-cascader组件懒加载地区
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 正确的方法附上链接 https://www.jianshu.com/p/209e690d0a00[https://...
- 代码： html部分： <el-tree ref = "instTree" :props = "props" :l...
- 在用element-ui的框架中，使用el-data-picker的type="daterange"的方式修改日期...
- 项目中用到的Element UI tree组件,由于向后台请求回来的数据庞大,需要使用懒加载,就研究了下,总结代码...
- 1.vue12-ElementUI tree组件懒加载的实现（接口必须要id查数据）
