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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM