el-cascader级联选择器

级联选择器进行行政区划选择

vue定义

                             <el-cascader
                                            style="width: 500px"
                                            v-model="formData.dz"
                                            :options="optionsXzq"
                                            :props="{ checkStrictly: true }"
                                            placeholder="请选择所在地区"
                                            clearable
                                            size="small"
                                            ref="xzqh"
                                            @change="xzqSelect"
                                            :disabled="state !== 1"
                                    ></el-cascader>                        

 

在@change获取行政区代码:

            //行政区划方法
            xzqSelect(data) {
                if (data.length != 0) {
                    // 去掉末尾的0:正则表达式
                    this.xzqdm = data[data.length - 1].replace(/(0+)\b/gi, "");
                    console.log(this.xzqdm);
                    //  获取所在地区名称:el-cascader
　　　　　　　　　　this.xzqmc = this.$refs["resultCasader"].getCheckedNodes()[0].pathLabels.join('/'); //获取行政区划名称并用/进行连接                 

                } else {
                    this.xzqdm = "";
                }
            },

在向后盾传值的过程中也不能直接使用formData.dz,应为此时这个formData.dz为一个数组,就行政区划而言,我们只需要要数组中的选中的最后一级即可

this.formData.dz = this.formData.dz[this.formData.dz.length - 1 ]