:value="item">
{{ item.name }}
</option>
</select>
<select v-model="selectedBlock" name="block">
<option
v-for="(item, index) in blocks"
:value="item">
{{ item.name }}
</option>
</select>
</div>
</template>
<script>
/**
* 省 市 区/县城 三联动选择器
*/
import provinces from './provinces.js'
import Vue from 'vue'
export default {
name: 'app',
created() {
// 数据初始化,默认选中北京市,默认选中第一个;北京市数据为总数据的前18个
let beijing = this.provinces.slice(0, 19)
this.cities = beijing.filter(item => {
if (item.level === 2) {
return true
}
})
this.selectedCity = this.cities[0] this.blocks = beijing.filter(item => {
if (item.level === 3) {
return true
}
})
this.selectedBlock = this.blocks[0] },
watch: {
selectedProvince(newVal, oldVal) {
// 港澳台数据只有一级,特殊处理
if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
this.cities = [newVal] this.blocks = [newVal] } else {
this.cities = this.provinces.filter(item => {
if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
return true
}
})
}
var _this = this
// 此时在渲染DOM,渲染结束之后再选中第一个
Vue.nextTick(() => {
_this.selectedCity = _this.cities[0] _this.$emit('input', _this.info)
})
},
selectedBlock() {
var _this = this
Vue.nextTick(() => {
_this.$emit('input', _this.info)
})
},
selectedCity(newVal) {
// 选择了一个市,要选择区了 di是城市的代表,sheng
if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
this.blocks = [newVal] this.cities = [newVal] } else {
this.blocks = this.provinces.filter(item => {
if (item.level === 3 && item.sheng && item.sheng == newVal.sheng && item.di === newVal.di && item.name !== '市辖区') {
return true
}
})
}
var _this = this
Vue.nextTick(() => {
_this.selectedBlock = _this.blocks[0] // 触发与 v-model相关的 input事件
_this.$emit('input', _this.info)
})
}
},
computed: {
info() {
return {
province: this.selectedProvince,
city: this.selectedCity,
block: this.selectedBlock
}
}
},
data() {
return {
selectedProvince: provinces[0],
selectedCity: 0,
selectedBlock: 0,
cities: 0,
provinces,
blocks: 0
}
}
}
</script>
<style lang="stylus" scoped>
.city-select select
outline 0
</style>
组件关键点说明:
HTML模板采用三个 select下拉控件,分别具有v-model由于绑定选择的数据,使用v-for遍历省市区数据
