<template>
<view>
<view class="list" :style="{
width:width+'rpx',height:height+'rpx'}">
<text class="must">
商户所在地区：
</text>
<picker class="picker" mode="multiSelector" :range="region" range-key="areaName" :value="regionIndex" @change="pickerChange"
@columnchange="pickerColumnchange">
<view class="pbox" :class="{
'pbox_hover':regionStr != '请选择省市区'}">
<view>{
{regionStr}}</view>
<text class="iconfont icon-you"></text>
</view>
</picker>
</view>
</view>
</template>
单独编写一个独立文件存放City.vue
<script>
export default {
data() {
return {
// 原数组
totalCity:[],
// 处理后的数组
region: [
[],
[],
[]
],
// 选择省市区的下标
regionIndex: [500, 220, 200],
// 省市区字符串
regionStr: '请选择省市区'
};
},
props: {
// 组件高度
height: {
type: Number,
default: 92
},
// 组件宽度
width: {
type: Number,
default: 710
},
codeList:{
type:Array,
default:()=>[]
},
// 是否是为修改(true为修改)
isRevise: {
type: [Boolean],
default: false
}
},
created() {
this.post("请求接口url",{
},data=>{
this.totalCity = data.result.items;
this.region[0] = this.totalCity;
this.region[1] = this.totalCity[0].children;
this.region[2] = this.region[1][0].children
if(this.codeList[0]){
this.setDefault()
}
});
},
methods: {
**回显选择的默认值**
setDefault(){
let str = ""
this.totalCity.find((item,index)=>{
if(item.areaCode == this.codeList[0]){
item.children.find((cItem,cIndex)=>{
if(cItem.areaCode == this.codeList[1]){
cItem.children.find((aItem,aIndex)=>{
if(aItem.areaCode == this.codeList[2]){
str = `${
item.areaName} ${
cItem.areaName} ${
aItem.areaName}`
this.region[1] = item.children;
this.region[2] = cItem.children
this.$set(this.regionIndex,0,index)
this.$set(this.regionIndex,1,cIndex)
this.$set(this.regionIndex,2,aIndex)
}
})
}
})
}
})
this.regionStr = str
},
**选择事件**
pickerChange(e) {
let [a,b,c] = e.detail.value
this.totalCity.find((item,index)=>{
if(index == a){
item.children.find((cItem,cIndex)=>{
if(cIndex == b){
cItem.children.find((aItem,aIndex)=>{
if(aIndex == c){
this.regionStr = `${
item.areaName} ${
cItem.areaName} ${
aItem.areaName}`
this.$emit('region',[item.areaCode,cItem.areaCode,aItem.areaCode])
}
})
}
})
}
})
},
**滚动关联信息**
pickerColumnchange(e) {
let {
column,value} = e.detail
if(column === 0){
this.region[1] = this.region[0][value].children
this.region[2] = this.region[1][0].children
this.$set(this.regionIndex,0,value)
this.$set(this.regionIndex,1,0)
this.$set(this.regionIndex,2,0)
}
if(column === 1){
this.region[2] = this.region[1][value].children
this.$set(this.regionIndex,1,value)
this.$set(this.regionIndex,2,0)
}
}
},
}
</script>
<style lang="less">
.list {
padding:10upx 0;
display: flex;
flex-direction: column;
background:#fff;
&>text{
font-size:28upx;
color:#999;
}
&>.picker{
height: 60upx;
font-size:36upx;
padding:10upx 0 0 30upx;
color:#666;
display: flex;
justify-content: space-between;
align-items: center;
&:after{
content:'';
width:0;
height:0;
border-width: 15upx;
border-style: solid;
border-color:transparent #ccc #ccc transparent;
margin-right:30upx;
transform: rotate(-45deg);
}
}
.name {
font-size: 28rpx;
color: #666;
}
.icon-you {
font-size: 28rpx;
color: #999999;
}
.input {
flex: 1;
height: 100%;
line-height: 92rpx;
color: #9080A1;
}
.textarea {
flex: 1;
height: 100%;
color: #A9A9A9;
}
}
</style>
**利用组件注入的方式使用即可**
<view class="cu-form-group">
<cityPicker :codeList="[formData.comProvinceCode || 0,formData.comCityCode || 0 ,formData.comTownCode || 0]" @region="cityInfo"></cityPicker>
</view>