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值，这里边查询和级联都多了一层操作