region.json
<template>
<view class="region">
<picker mode="multiSelector" :defaultValue="value" :range="range" range-key="name" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
<view class="content" :class="{ placeholder: !regionStr }">
<text class="ellipsis-1">{{ regionStr ? regionStr : placeholder }}</text>
</view>
</picker>
</view>
</template>
<script>
const regionData = require('@/static/json/region.json');
export default {
props: {
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: '请选择省/市/区'
},
defaultValue: {
type: Array,
default() {
return null;
}
}
},
data() {
return {
range: [[], [], []],
value: [0, 0, 0],
regionStr: '',
};
},
watch: {
defaultValue() {
this.defaultValue ? this.setDefaultValue() : this.setRange();
}
},
mounted() {
this.defaultValue ? this.setDefaultValue() : this.setRange();
},
methods: {
setRange() {
let range = [[], [], []];
regionData.forEach(el => {
range[0].push({
id: el.id,
level: el.level,
name: el.name,
pid: el.pid
});
});
regionData[this.value[0]].children.forEach(el => {
range[1].push({
id: el.id,
level: el.level,
name: el.name,
pid: el.pid
});
});
regionData[this.value[0]].children[this.value[1]].children.forEach(el => {
range[2].push({
id: el.id,
level: el.level,
name: el.name,
pid: el.pid
});
});
this.range = range;
},
setDefaultValue() {
let provinceIndex = regionData.findIndex(el => {
return el.name == this.defaultValue[0];
});
if(provinceIndex < 0) provinceIndex = 0;
let cityIndex = regionData[provinceIndex].children.findIndex(el => {
return el.name == this.defaultValue[1];
});
if(cityIndex < 0) cityIndex = 0;
let areaIndex = regionData[provinceIndex].children[cityIndex].children.findIndex(el => {
return el.name == this.defaultValue[2];
});
if(areaIndex < 0) areaIndex = 0;
this.value = [provinceIndex, cityIndex, areaIndex];
this.setRange();
this.regionStr =
regionData[provinceIndex].name + '·' + regionData[provinceIndex].children[cityIndex].name + '·' + regionData[provinceIndex].children[cityIndex].children[areaIndex].name;
},
columnchange(event) {
if (event.detail.column == 0) {
this.value = [event.detail.value, 0, 0];
}
if (event.detail.column == 1) {
this.value.splice(1, 1, event.detail.value);
this.value.splice(2, 1, 0);
}
if (event.detail.column == 2) {
this.value.splice(2, 1, event.detail.value);
}
this.setRange();
},
change(event) {
this.regionStr = this.range[0][this.value[0]].name + '·' + this.range[1][this.value[1]].name + '·' + this.range[2][this.value[2]].name;
this.$emit('change', [this.range[0][this.value[0]], this.range[1][this.value[1]], this.range[2][this.value[2]]]);
}
}
};
</script>
<style lang="scss" scoped>
.ellipsis-1 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.content {
text-align: left;
padding-left: 40rpx;
}
.placeholder {
color: #dbdbdb;
}
</style>
<BiaofunRegion class="region" @change="changeRegion"></BiaofunRegion>
import BiaofunRegion from '@/components/biaofun-region/biaofun-region.vue';
changeRegion(region) {
let array = [];
region.forEach(item => {
array.push(item.name)
})
this.area = array;
},