Elment-ui Cascader级联选择器 异步加载省市区
场景:
1、异步加载选择省市区
2、编辑写入默认值
注意:如果编辑的内容是通过每次点击弹框显示编辑内容,默认写入已选选项,会出现给了默认值cascader组件不显示问题
可以用v-if来控制,弹框打开显示cascader组件,关闭销毁组件
<template> <div class="p30"> <el-cascader :props="props" v-model="value" ref="cas" clearable></el-cascader> </div> </template> <script> import api from '@/api/organization' export default { data () { return { value: '', initValue: ["340000", "340100"], props: { lazy: true, lazyLoad (node, resolve) { const { level } = node; //异步获取省市区 api.getOrganizationProvince({ parentCode: level ? node.value : '' }).then(res => { const provinceList = res.data.map(item => ({ value: item.regionCode, label: item.regionName, leaf: level > 0,//可控制显示几级 })) resolve && resolve(provinceList) }) } } } }, mounted () { //写入默认值 this.value = ["330000", "330100", "330103"] }, } </script>