Vue+ElementUI 实现省市区三级联动_element 省市区

json文件格式

html部分

<el-select size="small" style="width: 170px"
           v-model="province"
           placeholder="请选择省份（直辖市）"
           v-on:change="changeProvince()">
    <el-option  v-for="item in provinces"
                :label="item.label"
                :value="item.label" :key="item.value">
    </el-option>
</el-select> 省
 
<el-select size="small" style="width: 160px;margin-left: 10px"
           v-model="city"
           placeholder="请选择城市"
           v-on:change="changeCity">
    <el-option  v-for="item in citys"
                :label="item.label"
                :value="item.label" :key="item.value">
    </el-option>
</el-select> 市
 
<el-select size="small" style="width: 160px;margin-left: 10px"
           v-model="district"
           placeholder="请选择区（县）"
           v-on:change="changeDistrict">
     <el-option  v-for="item in districts"
                 :label="item.label"
                 :value="item.label" :key="item.value">
     </el-option>
</el-select> 区

js部分

<script>
    import axios from 'axios'
    export default {
        name: "ThingLostManage",
        data() {
            return {
                province:'',  // 省
                city:'',     // 市
                district:'',  // 区
 
                provinces:[],
                citys:[],
                districts:[],
            }
        },
        created() {
            this.load()
        },
        mounted(){
            this.getJson()
        },
        methods: {
            load() {
            },
            // 获取城市json
            getJson(){
                axios.get('/city.json').then(res => {
                    this.provinces=res.data;
                    //console.log(this.provinces)
                })
            },
            changeProvince(){
                // 切换省,市切换为默认第一个
                this.citys = this.provinces.find(s => s.label === this.province).children;
                //console.log(this.citys)
                if(this.city != null) {
                    this.city = null;
                    this.district = null
                }
            },
            changeCity(){
                // 切换市,县区切换为默认第一个
                this.districts = this.citys.find(s => s.label === this.city).children
                //console.log(this.districts)
                if(this.district != null) {
                    this.district = null
                }
            }
        }
    }
</script>

运行结果

 注意事项