iview利用Cascader 组件实现级联选择功能

后台需要做省市区三级联动选择的功能，以前都用的是select组件，这次想和shop一样，用Cascader 这个组件去实现一把

网上找了许多代码，都不是特别完善，正好自己写出来了，就记录一下，以后可以用到。

        楼盘地址：
            
            
        

:data是用来初始化一开始的第一级的数据，比如省市区，那么第一级就是获取所有省份的数据

 //渲染查询框中的三级地址
        getProvinces: function () {
            // 1、先获取所有的省份并返回
            // 2.同时修改对象，每一项添加属性cities,并设置为空数组、
            jQuery.ajax({
                url:"/xxxxxxxxx",
                type:"POST",
                async:false,
                success:function (data) {
                    if(data.code === "1") {
                        let arrays = []
                        data.data.forEach(element => {
                            arrays.push({
                                level: 1,
                                id: element.id,
                                value: element.id,
                                label: element.name,
                                children: [],
                                loading: false
                            })
                        });
                        //给对应的data属性的值赋值
                        xxxxVue.platOptions = arrays;
                    }
                }
            });
        },

使用v-model绑定对应的数据，选中后的最终数据就是v-model对应的数据了

使用:load-data去动态加载每一次选中后应该携带的下级的数据

 //动态加载地址组件里面的参数
        loadData:function (item, callback) {
            item.loading = true;
            let arrays = []
            let parentId;
            if (item.level === 1) {
                // 在加载时候，手动返回
                // this.value[0] = item.value
                 parentId = item.value;
                //拿到下一级的数据：然后继续设置对应的级别和id
                jQuery.ajax({
                    url: "/xxx/getNextCitys",
                    data: {"parentId":parentId},
                    type: "POST",
                    async: false,
                    success: function (data) {
                        if (data.code === "1") {
                            data.data.forEach(element => {
                                arrays.push({
                                    level: 2,
                                    id: element.id,
                                    value: element.id,
                                    label: element.name,
                                    children: [],
                                    loading: false
                                })
                            });
                            console.log(arrays);
                        }
                    }
                })
            } else if (item.level === 2) {
                parentId = item.value;
                jQuery.ajax({
                    url: "/xxx/getNextCitys",
                    data: {"parentId":parentId},
                    type: "POST",
                    async: false,
                    success: function (data) {
                        if (data.code === "1") {
                            data.data.forEach(element => {
                                arrays.push({
                                    level: 3,
                                    id: element.id,
                                    value: element.id,
                                    label: element.name,
                                })
                            });
                        }
                    }
                })
            }

            //item代表对应回调，每次改动后，需要把下一级的children信息放到item上
            item.children = arrays
            item.loading = false;
            callback()

        },

关键的属性就是id,label,value,level,children

其实也就是选了第一级，那么就会回调到load-data事件，里面的item代表当前选中的值，拿到这个id后去请求下一级的信息放到当前item的children信息里面，

选了第二级那么再去处理第三级就好了，就是这么简单

文档附上：https://www.iviewui.com/components/cascader#DTJZXX

https://segmentfault.com/a/1190000020998564?utm_source=tag-newest