element-ui Cascader 级联选择器 省市区数据处理

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言;
如果你觉得公众号内容对你有帮助，欢迎关注并转载

element-ui Cascader 级联选择器 省市区数据处理

数据处理背景：项目中省市区用的是一个接口，根据传递的parentCode参数来返回对应的省、市、区数据，这种数据结构跟element-ui级联组件的数据不一样，不能直接使用element-ui的级联组件，需要改造，改造如下：

1.请求接口获取省数据

2.根据选择的省，请求对应的市数据，并拼接到对应省的children中

3.选择市，请求对应的区数据，并拼接到对应的市的children中

4.其中Cascader 级联选择器中的change事件可以返回选择的省市区值

代码如下：

<el-cascader
    v-model="form.area"
    :options="options"
    @change="handleChange"
    style="width:100%"
    placeholder="请选择地区"
    :props="{ value: 'areaCode', label: 'areaName', children: 'childSdAreas'}">
</el-cascader>

data() {
    return{
         options: [],
         form:{
             area:'',
         }
    }
},
mounted:{
     this.handleChange(value,'init')
},
methods:{
     handleChange(value,type) {
            let code = ''
            if(type == 'init'){
                code = value
            }else if(value.length){
                code = value[value.length - 1]
            }
            this.$axios
            .get('接口名称', {parentCode: code})
            .then((res) => {
                if (res.success) {
                    if (type == 'init') {
                        res.data.forEach(item => {
                            item.children = []
                        })
                        this.options = res.data
                    } else if (value.length == 1) {
                        res.data.forEach(item => {
                            item.children = []
                        })
                        this.provinceCode = code
                        for (let provinceKey in this.options) {
                            if (this.options[provinceKey].areaCode == code) {
                                this.$set(this.options[provinceKey],'children',res.data);
                            }
                        }
                    } else if (value.length == 2) {
                        for (let provinceKey in this.options) {
                            if (this.options[provinceKey].areaCode == this.provinceCode) {  // 市
                                for (let cityKey in this.options[provinceKey].children) {
                                    this.$set(this.options[provinceKey].children[cityKey],'children',res.data);
                                }
                            }
                        }
                    }
                } else {
                    this.$message.error(res.message);
                }
            });
        },
}