Wizzer's Blog

 <el-cascader ref="area" v-model="infoForm.area" :props="cascaderProps" style="width: 500px;"
                                     size="small" placeholder="请选择区域"></el-cascader>

cascaderProps: {
                    lazy: true,
                    value: 'id',
                    label: 'text',
                    lazyLoad: function (node, resolve) {
                        if (node.level === 0) {
                            var url = base + "/assets/platform/plugins/zoning/0.json";
                            $.get(url, function (d) {
                                resolve(d);
                            }, "json");
                        } else {
                            var pidaspath = node.data.id > 0 ? (node.data.id.substring(0, 2) + "/" + node.data.id) : 0;
                            var url = base + "/assets/platform/plugins/zoning/"+pidaspath+".json";
                            $.get(url, function (d) {
                                resolve(d);
                            }, "json");
                        }
                    }
                },
                infoForm: {
                    type: 'designer',
                    area: [],
                    areaCode: '',
                    areaText: '',
                },

// 后台返回数据时
this.$set(this.infoForm,'area',this.infoForm.areaCode.split(','))

// 前端入库数据处理
if (this.infoForm.area) {
                                        this.$set(this.infoForm, 'areaCode', this.infoForm.area.toString());
                                    }
                                    if (this.$refs['area']) {
                                        var tree = this.$refs['area'].getCheckedNodes();
                                        this.$set(this.infoForm, 'areaText', tree[0].pathLabels.toString());
                                    }