首先呈现效果图
1.我的是通过element-ui实现的；可自由选择UI
2.话不多说，直接上代码，结构非常简单
1 <el-form ref="form" :model="form" label-width="100px"> 2 <el-form-item label=""> 3 一:vue实现城市联动选择 4 </el-form-item> 5 <el-form-item label=""> 6 一:可清除输入框记录 7 </el-form-item> 8 <el-form-item label="所在地区：" class="selform"> 9 <el-cascader 10 :options="CityInfo" 11 v-model="form.selectedOptions" 12 :change-on-select="true" 13 :clearable="true" 14 :filterable="true" 15 @change="handleChange"> 16 </el-cascader> 17 <span>所选地区：{{form.city | myAddressCity}}{{form.erae | myAddressErae}}{{form.minerae | myAddressMinerae}}</span> 18 </el-form-item> 19 </el-form>
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].label 24 } 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].label 42 } 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: '延庆县' }
]
}
]
},