官方的demo
<el-cascader :props="props"></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
};
</script>
思路就是level就是层级关系,0就是1级列表,再将获取到的数组定义为value和label,再将leaf设为false。然后将获取到的数据回调给方法resolve。最后node里面的value就是你选择的所有value的数组了。
注意 :最后一级设为true就不会继续加载了 而是回显到上面的选择框上。
下面看真实的demo
<el-form-item label="关联区域代码" label-width="120px">
<el-cascader v-model="form.areaCode" :props="props"></el-cascader>
</el-form-item>
引入获取省市区镇的列表的接口方法。
import { getProvinceList, getCityList, getCountyList, getTownList } from '@/api/area';
export default {
data() {
return {
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
if (level == 0) {
getProvinceList().then((res) => {
if (res.code == 200) {
var data = res.data;
var nodes = data.map(item => {
return {
value: item.code,
label: item.name,
leaf: false
};
});
resolve(nodes);
}
})
} else if (level == 1) {
getCityList(node.value).then((res) => {
if (res.code == 200) {
var data = res.data;
var nodes = data.map(item => {
return {
value: item.code,
label: item.name,
leaf: false
};
});
resolve(nodes);
}
})
} else if (level == 2) {
getCountyList(node.value).then((res) => {
if (res.code == 200) {
var data = res.data;
var nodes = data.map(item => {
return {
value: item.code,
label: item.name,
leaf: false
};
});
resolve(nodes);
}
})
} else if (level == 3) {
getTownList(node.value).then((res) => {
if (res.code == 200) {
var data = res.data;
var nodes = data.map(item => {
return {
value: item.code,
label: item.name,
leaf: true
};
});
resolve(nodes);
}
})
}
},
}
}
},
mounted() {
},
methods: {
}
}
效果如下:
版权声明:本文为Liu_JiaqiPro原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。