vue2.0 结合iview组件实现五级联动

五级联动"/>

vue2.0 结合iview组件实现五级联动

需求:点击上级给下级赋值利用@on-select取到所点击的下标再与数组里的Id进行匹配

html:

<template><div><Form ref="formValidate" :model="formValidate"><Row><Col span="2"><FormItem><Select v-model="formValidate.Area" placeholder="请选择国家" @on-change="onCountry"><Option v-for="item in Area" :key="item.id" :value="item.id">{{ item.name}}</Option></Select></FormItem></Col><Col span="2"><FormItem><Select v-model="formValidate.province" placeholder="请选择省份" @on-change="onProvince"><Option v-for="item in provinceArr" :key="item.id" :value="item.id">{{ item.name}}</Option></Select></FormItem></Col><Col span="2"><FormItem><Select v-model="formValidate.city" placeholder="请选择城市" @on-change="onCity"><Option v-for="item in city" :key="item.id" :value="item.id">{{ item.name}}</Option></Select></FormItem></Col><Col span="2"><FormItem><Select v-model="formValidate.district" placeholder="请选择所属区县" @on-change="onDistrict"><Option v-for="item in district" :key="item.id" :value="item.id">{{item.name}}</Option></Select></FormItem></Col><Col span="2"><FormItem><Select v-model="formValidate.street" placeholder="请选择所属街道"><Option v-for="item in street" :key="item.id" :value="item.id">{{item.name}}</Option></Select></FormItem></Col></Row><FormItem><Button type="primary" @click="handleSubmit('formValidate')">保存</Button><Button @click="$router.go( -1)" style="margin-left: 8px">返回</Button></FormItem></Form></div>
</template>

js:

<script>
export default {name: "help",data() {return {Area: [{id: 1,name: "中国",provinceArr: [{id: 11,name: "湖南省",city: [{id: 1100,name: "株洲市",district: [{id: 110011,name: "茶陵县",street: [{id: 11001100,name: "莲花街道"},{id: 11001101,name: "莲花街道莲花街道"}]}]},{id: 1101,name: "株洲市2",district: [{id: 110111,name: "茶陵县2",street: [{id: 11011100,name: "莲花街道2"}]}]}]},{id: 12,name: "广东省",city: [{id: 1200,name: "广州市",district: [{id: 120011,name: "越秀区",street: [{id: 12001100,name: "东风路"}]}]}]}]},{id: 2,name: "美国",provinceArr: [{id: 21,name: "阿拉斯加州",city: [{id: 2100,name: "朱诺市",district: [{id: 210011,name: "亚拉巴马",street: [{id: 21001100,name: "蒙哥马利"}]}]}]},{id: 22,name: "阿拉斯加州2",city: [{id: 2200,name: "朱诺市2",district: [{id: 220011,name: "亚拉巴马2",street: [{id: 22001100,name: "蒙哥马利2"}]}]}]}]}],provinceArr: "",city: "",district: "", //所属区县street: "", //所属街道formValidate: {province: "",city: "",district: "",street: ""}};},methods: {onCountry(val) {//国家for (var i = 0; i < this.Area.length; i++) {if (val == this.Area[i].id) {this.provinceArr = this.Area[i].provinceArr;}}},onProvince(val) {//省份this.formValidate.city = "";this.formValidate.district = "";this.formValidate.street = "";this.city = [];this.district = [];this.street = [];for (var i = 0; i < this.provinceArr.length; i++) {if (val == this.provinceArr[i].id) {this.city = this.provinceArr[i].city;}}},onCity(val) {//城市this.formValidate.street = "";this.street = [];for (var i = 0; i < this.city.length; i++) {if (val == this.city[i].id) {this.district = this.city[i].district;}}},onDistrict(val) {//区县for (var i = 0; i < this.district.length; i++) {if (val == this.district[i].id) {this.street = this.district[i].street;}}},handleSubmit(name) {this.$refs[name].validate(valid => {if (valid) {}});},handleReset(name) {}}
};
</script>