问题描述：

遇到一个需求，就是市和县要做成两个选择框，并保持它们数据的联动。使用vue + element ui的实现方法如下：

<template><div class="app-container"><el-form label-position="left" ref="form" :model="form" label-width="40px"><el-row><el-col :span="6"><el-form-item label="市："><el-select size="small" v-model="form.cityId" clearable placeholder="请选择市" @change="handleChangeCity"><el-optionv-for="item in cityDic":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col><el-col :span="10"><el-form-item label="县："><el-select size="small" v-model="form.countyId" clearable placeholder="请选择县"><el-optionv-for="item in countyDic":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col></el-row></el-form></div>
</template><script>
export default {data() {return {form: {cityId: '',countyId: ''},cityDic: [{code: '1',name: '郑州市'},{code: '2',name: '开封市'},{code: '3',name: '洛阳市'},{code: '4',name: '南阳市'}],countyDic: []};},mounted() {},methods: {//市选中发生变化时，联动县数据事件handleChangeCity(value) {this.countyDic = [] //每次市选中发生变化就初始化县的数据this.form.countyId = '' //每次市选中发生变化时，就重置清空县的选中值if(value) {let cityName = this.cityDic.find(item => item.code === value).namefor(let i = 1; i < 5; i++) {this.countyDic.push({code: i,name: cityName + '的县 ' + i})}}},},
};
</script>
<style scoped></style>