vue实现三级联动组件修改数据源_vue实现省市区三级联动

首先呈现效果图

1.我的是通过element-ui实现的；可自由选择UI

2.话不多说，直接上代码，结构非常简单

1

2

3 一:vue实现城市联动选择4

5

6 一:可清除输入框记录7

8

9

11 v-model="form.selectedOptions"

12 :change-on-select="true"

13 :clearable="true"

14 :filterable="true"

15 @change="handleChange">

16

17 所选地区：{{form.city | myAddressCity}}{{form.erae | myAddressErae}}{{form.minerae | myAddressMinerae}}

18

19

3.js部分(重点部分是实现字段的重重过滤)

1 el: "#app",2 data: {3 CityInfo: CityInfo,//地区数据

4 form: {5 city: '',6 erae: '',7 minerae: '',8 selectedOptions: [],//地区筛选数组

9 },10 },11 methods: {12 handleChange(value) {13 this.form.city = this.form.selectedOptions[0];14 this.form.erae = this.form.selectedOptions[1]15 this.form.minerae = this.form.selectedOptions[2]16 },17 },18 /*字段过滤*/

19 filters: {20 myAddressCity: function(value) {21 for (y in this.CityInfo) {22 if (this.CityInfo[y].value ==value) {23 return value = this.CityInfo[y].label24 }25 }26 },27 myAddressErae: function(value) {28 for (y in this.CityInfo) {29 for (z in this.CityInfo[y].children) {30 if (this.CityInfo[y].children[z].value == value && value !=undefined) {31 return value = this.CityInfo[y].children[z].label;32 }33 }34 }35 },36 myAddressMinerae: function(value) {37 for (y in this.CityInfo) {38 for (z in this.CityInfo[y].children) {39 for (i in this.CityInfo[y].children[z].children) {40 if (this.CityInfo[y].children[z].children[i].value == value && value !=undefined) {41 return value = this.CityInfo[y].children[z].children[i].label42 }43 }44 }45 }46 },47 },

4.城市数据代码格式

{

value: 1, label: '北京', children: [

{

value: 1, label: '北京市', children: [

{ value: 1, label: '东城区' },

{ value: 2, label: '西城区' },

{ value: 3, label: '崇文区' },

{ value: 4, label: '宣武区' },

{ value: 5, label: '朝阳区' },

{ value: 6, label: '丰台区' },

{ value: 7, label: '石景山区' },

{ value: 8, label: '海淀区' },

{ value: 9, label: '门头沟区' },

{ value: 10, label: '房山区' },

{ value: 11, label: '通州区' },

{ value: 12, label: '顺义区' },

{ value: 13, label: '昌平区' },

{ value: 14, label: '大兴区' },

{ value: 15, label: '怀柔区' },

{ value: 16, label: '平谷区' },

{ value: 17, label: '密云县' },

{ value: 18, label: '延庆县' }

]

}

]

},