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>

 

posted @ 2020-05-29 14:34  juneChen  阅读(1403)  评论(0编辑  收藏  举报