級聯選擇器進行行政區劃選擇

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 ]