因为有之前的经验教训,可能是layui和vue的冲突,一个简单的级联饶了我一天的时间
估计以后打死我都不想用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值,这里边查询和级联都多了一层操作