PC端element级联选择器(省市区动态获取数据选择)

html

<el-cascader v-model="form_area" :props="optionProps" filterable ref="myCascader" @change="areaChage"></el-cascader>

data中

  form_area:{},//存储获取的省市区
  optionProps: { //配置节点
                    emitPath: false,
                    lazy: true,
                    lazyLoad: ((node, resolve) => {
                        const level = node.level
                        var url = '__CONTROLLER__/dcCommonRequest'
                        let params = {}
                        let result = []
                        if (this.form_area.xiugai) {
                        	//修改时走
                            params.provincesFilters = 'provincesFilters'
                            params.action_name = 'provinceRows'
                            this.ajax('post', url, params, (res) => {
                                var result1
                                result1 = res.data.rows
                                result1.forEach(item => {
                                    item.value = JSON.stringify(item.id)
                                    item.label = item.name
                                })
                                result = result1
                            })
                            params.action_name = 'cityRows'
                            params.provinceId = this.form_area.prov
                            this.ajax('post', url, params, (res) => {
                                var result2
                                result2 = res.data.rows
                                result2.forEach(item => {
                                    item.value = JSON.stringify(item.id)
                                    item.label = item.name
                                })
                                for (let i = 0; i < result.length; i++) {
                                    if (result[i].id == this.form_area.prov) {
                                        result[i].children = result2
                                        console.log(result[i])
                                    }
                                }
                            })
                            params.action_name = 'areaRows'
                            params.cityId = this.form_area.city
                            this.ajax('post', url, params, (res) => {
                                if (res.data.rows == '') {
                                    params.provinceId = this.form_area.prov
                                    params.cityId = this.form_area.city
                                    params.action_name = 'townRows'
                                    this.ajax('post', url, params, (res) => {
                                        var result2
                                        result3 = res.data.rows
                                        result3.forEach(item => {
                                            item.value = JSON.stringify(item.id)
                                            item.label = item.name
                                            item.leaf = true
                                        })
                                    })
                                } else {
                                    var result2
                                    result3 = res.data.rows
                                    result3.forEach(item => {
                                        item.value = JSON.stringify(item.id)
                                        item.label = item.name
                                        item.leaf = true
                                    })
                                    for (let i = 0; i < result.length; i++) {
                                        if (result[i].id == this.form_area.prov) {
                                            for (let e = 0; e < result[i].children.length; e++) {
                                                if (result[i].children[e].id == this.form_area.city) {
                                                    result[i].children[e].children = result3
                                                }

                                            }
                                        }
                                    }
                                }
                            })
                            this.form_area.xiugai = false
                            resolve(result)
                        } else {
                        //新增时走
                            if (level === 0) {
                                params.provincesFilters = 'provincesFilters'
                                params.action_name = 'provinceRows'
                            }
                            if (level === 1) {
                                params.action_name = 'cityRows'
                                params.provinceId = node.value
                                this.form_area.prov = node.value
                            }
                            if (level === 2) {
                                params.action_name = 'areaRows'
                                params.cityId = node.value
                                this.form_area.city = node.value
                            }
                            this.ajax('post', url, params, (res) => {
                                if (level === 0 || level === 1) {
                                    result = res.data.rows
                                    result.forEach(item => {
                                        item.value = item.id
                                        item.label = item.name
                                    })
                                }
                                if (level === 2) {
                                    if (res.data.rows == '') {
                                        params.provinceId = this.form_area.prov
                                        params.cityId = this.form_area.city
                                        params.action_name = 'townRows'
                                        this.ajax('post', url, params, (res) => {
                                            result = res.data.rows
                                            result.forEach(item => {
                                                item.value = item.id
                                                item.label = item.name
                                                item.leaf = level >= 1
                                            })
                                        })
                                    } else {
                                        result = res.data.rows
                                        result.forEach(item => {
                                            item.value = item.id
                                            item.label = item.name
                                            item.leaf = level >= 1
                                        })
                                    }

                                }
                                resolve(result)
                            })
                        }

                    })
                },

默认赋值方法:给v-model绑定的值赋值如下格式

  form_area.area = ["140000", "140200", "140212"]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值