Element的select的實現省市區級聯

因爲有之前的經驗教訓，可能是layui和vue的衝突，一個簡單的級聯饒了我一天的時間

layui的select實現省市區級聯

估計以後打死我都不想用layui了

所以新做的增刪改查頁面統一用Element了，不知道比layui簡單多少

1、頁面html

            <el-form-item label=項目所在地>
                <el-select  style="width: 100px;" v-model="form2.province" clearable @change="getCity" value-key="dcode"  prop="province">
                        <el-option
                        v-for="item in provinceData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>-
                <el-select  style="width: 100px;" v-model="form2.city" clearable  @change="getTown" value-key="dcode" prop="city">
                        <el-option
                        v-for="item in cityData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>-
                <el-select  style="width: 100px;" v-model="town" clearable value-key="dcode"  prop="town">
                        <el-option
                        v-for="item in townData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>
            </el-form-item>

2、data聲明

3、change方法

            getProvince(){
                this.axios.get("/qsmonitor/common/dist?pcode=")
                    .then(res => {
                        this.provinceData = res.data.data;
                    });
            },
            getCity(item){

                let dcode=item.dcode;
                this.form2.city='';
                this.town='';
                this.cityData=[];
                this.townData=[];
                this.axios.get("/qsmonitor/common/dist?pcode="+dcode)
                    .then(res => {
                        this.cityData = res.data.data;
                        this.$forceUpdate();
                    });
            },
            getTown(item){
                let dcode=item.dcode;
                this.town='';
                this.townData=[];
                this.axios.get("/qsmonitor/common/dist?pcode="+dcode)
                    .then(res => {
                        this.townData = res.data.data;
                        this.$forceUpdate();
                    });
            },

注意：上邊給option的value賦的是一個對象值，需要設定value-key的值

因爲頁面中的省市區縣是作爲查詢條件取得的distname的值，但是級聯時候用到的是dcode，所以相比直接賦value值，這裏邊查詢和級聯都多了一層操作