vue實現省市區三級聯動

首先呈現效果圖

 

 

 

1.我的是通過element-ui實現的；可自由選擇UI

2.話不多說，直接上代碼，結構非常簡單

<el-form ref="form" :model="form" label-width="100px">
      <el-form-item  label="">
           一:vue實現城市聯動選擇
      </el-form-item>
      <el-form-item  label="">
           一:可清除輸入框記錄
      </el-form-item>
      <el-form-item  label="所在地區：" class="selform">
          <el-cascader
            :options="CityInfo"
            v-model="form.selectedOptions"
            :change-on-select="true"
            :clearable="true"
            :filterable="true"
            @change="handleChange">
           </el-cascader>
          <span>所選地區：{{form.city | myAddressCity}}{{form.erae | myAddressErae}}{{form.minerae | myAddressMinerae}}</span>
      </el-form-item>
 </el-form>

 

3.js部分（重點部分是實現字段的重重過濾）

el: "#app",
    data: {
        CityInfo: CityInfo,//地區數據
        form: {
            city: '',
            erae: '',
            minerae: '',
            selectedOptions: [],//地區篩選數組
        },
    },
    methods: {
        handleChange(value) {
            this.form.city = this.form.selectedOptions[0];
            this.form.erae = this.form.selectedOptions[1]
            this.form.minerae = this.form.selectedOptions[2]
        },
    },
    /*字段過濾*/
    filters: {
        myAddressCity: function (value) {
            for (y in this.CityInfo) {
                if (this.CityInfo[y].value == value) {
                    return value = this.CityInfo[y].label
                }
            }
        },
        myAddressErae: function (value) {
            for (y in this.CityInfo) {
                for (z in this.CityInfo[y].children) {
                    if (this.CityInfo[y].children[z].value == value && value != undefined) {
                        return value = this.CityInfo[y].children[z].label;
                    }
                }
            }
        },
        myAddressMinerae: function (value) {
            for (y in this.CityInfo) {
                for (z in this.CityInfo[y].children) {
                    for (i in this.CityInfo[y].children[z].children) {
                        if (this.CityInfo[y].children[z].children[i].value == value && value != undefined) {
                            return value = this.CityInfo[y].children[z].children[i].label
                        }
                    }
                }
            }
        },
    },

 

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: '延慶縣' }
				]
			}
		]
	},