1、template样式
<view class="wrap" type="text" >
<view class="region">
请选择地区：
</view>
<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
@change="pickerChange" @columnchange="pickerColumnchange">
<view class="le">{
{patientBasic.cityName}}</view>
</picker>
</view>
2、script代码
<script>
import provinceData from './provinceData.js'
export default {
data() {
return {
oldpProvinceDataList: provinceData,
newProvinceDataList: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
patientBasic: {
cityName: '请输入',
}
}
},
onLoad() {
for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
}
},
methods: {
pickerChange(e) {
this.multiIndex = e.detail.value;
this.patientBasic.cityName =
`${
this.newProvinceDataList[0][this.multiIndex[0]]}--${
this.newProvinceDataList[1][this.multiIndex[1]]}--${
this.newProvinceDataList[2][this.multiIndex[2]]}`
console.log(this.select)
},
pickerColumnchange(e) {
if (e.detail.column === 0) {
this.multiIndex[0] = e.detail.value
this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
return item.name
})
if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
index) => {
return item
})
} else {
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
1]].area.map((item, index) => {
return item
})
}
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
if (e.detail.column === 1) {
this.multiIndex[1] = e.detail.value
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
.area.map((item, index) => {
return item
})
this.multiIndex.splice(2, 1, 0)
}
if (e.detail.column === 2) {
this.multiIndex[2] = e.detail.value
}
},
}
</script>
3、地区的js代码
export default [
{
"name": "北京",
"city": [{
"name": "北京",
"area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区",
"平谷区",
"怀柔区", "密云县", "延庆县"
]
}]
},
{
"name": "天津",
"city": [{
"name": "天津",
"area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区",
"宁河县", "静海县", "蓟 县"
]
}]
},
{
"name": "河北",
"city": [
{
"name": "石家庄",
"area": ["长安区", "桥东区", "桥西区", "新华区", "郊 区", "井陉矿区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县",
"无极县",
"平山县", "元氏县", "赵 县", "辛集市", "藁城区", "晋州市", "新乐市", "鹿泉市"
]
},
{
"name": "唐山",
"area": ["路南区", "路北区", "古冶区", "开平区", "新 区", "丰润县", "滦 县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县", "遵化市", "丰南市",
"迁安市"
]
},
{
"name": "秦皇岛",
"area": ["海港区", "山海关区", "北戴河区", "青龙满族自治县", "昌黎县", "抚宁县", "卢龙县"]
},
{
"name": "邯郸",
"area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉 县", "磁 县", "肥乡县", "永年县", "邱 县", "鸡泽县",
"广平县", "馆陶县", "魏 县", "曲周县", "武安市"
]
},
{
"name": "邢台",
"area": ["桥东区", "桥西区", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任 县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县",
"威 县",
"清河县", "临西县", "南宫市", "沙河市"
]
},
{
"name": "保定",
"area": ["新市区", "北市区", "南市区", "满城县", "清苑县", "涞水县", "阜平县", "徐水县", "定兴县", "唐 县", "高阳县", "容城县", "涞源县", "望都县", "安新县",
"易 县", "曲阳县", "蠡 县", "顺平县", "博野", "雄县", "涿州市", "定州市", "安国市", "高碑店市"
]
},
{
"name": "张家口",
"area": ["桥东区", "桥西区", "宣化区", "下花园区", "宣化县", "张北县", "康保县", "沽源县", "尚义县", "蔚 县", "阳原县", "怀安县", "万全县", "怀来县",
"涿鹿县",
"赤城县", "崇礼县"
]
},
{
"name": "承德",
"area": ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县"]
},
{
"name": "沧州",
"area": ["新华区", "运河区", "沧 县", "青 县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献 县", "孟村回族自治县", "泊头市", "任丘市",
"黄骅市", "河间市"
]
},
{
"name": "廊坊",
"area": ["安次区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市"]
},
{
"name": "衡水",
"area": ["桃城区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景 县", "阜城县", "冀州市", "深州市"]
}
]
},
{
"name": "山西",
"city": [
{
"name": "太原",
"area": ["小店区", "迎泽区", "杏花岭区", "尖草坪区", "万柏林区", "晋源区", "清徐县", "阳曲县", "娄烦县", "古交市"]
},
{
"name": "大同",
"area": ["城 区", "矿 区", "南郊区", "新荣区", "阳高县", "天镇县", "广灵县", "灵丘县", "浑源县", "左云县", "大同县"]
},
{
"name": "阳泉",
"area": ["城 区", "矿 区", "郊 区", "平定县", "盂 县"]
},
{
"name": "长治",
"area": ["城 区", "郊 区", "长治县", "襄垣县", "屯留县", "平顺县", "黎城县", "壶关县", "长子县", "武乡县", "沁 县", "沁源县", "潞城市"]
},
{
"name": "晋城",
"area": ["城 区", "沁水县", "阳城县", "陵川县", "泽州县", "高平市"]
},
{
"name": "朔州",
"area": ["朔城区", "平鲁区", "山阴县", "应 县", "右玉县", "怀仁县"]
},
{
"name": "忻州",
"area": ["忻府区", "原平市", "定襄县", "五台县", "代 县", "繁峙县", "宁武县", "静乐县", "神池县", "五寨县", "岢岚县", "河曲县", "保德县", "偏关县"]
},
{
"name": "吕梁",
"area": ["离石区", "孝义市", "汾阳市", "文水县", "交城县", "兴 县", "临 县", "柳林县", "石楼县", "岚 县", "方山县", "中阳县", "交口县"]
},
{
"name": "晋中",
"area": ["榆次市", "介休市", "榆社县", "左权县", "和顺县", "昔阳县", "寿阳县", "太谷县", "祁 县", "平遥县", "灵石县"]
},
{
"name": "临汾",
"area": ["临汾市", "侯马市", "霍州市", "曲沃县", "翼城县", "襄汾县", "洪洞县", "古 县", "安泽县", "浮山县", "吉 县", "乡宁县", "蒲 县", "大宁县",
"永和县", "隰 县", "汾西县"
]
},
{
"name": "运城",
"area": ["运城市", "永济市", "河津市", "芮城县", "临猗县", "万荣县", "新绛县", "稷山县", "闻喜县", "夏 县", "绛 县", "平陆县", "垣曲县"]
}
]
},
{
"name": "内蒙古",
"city": [
{
"name": "呼和浩特",
"area": ["新城区", "回民区", "玉泉区", "郊 区", "土默特左旗", "托克托县", "和林格尔县", "清水河县", "武川县"]
},
{
"name": "包头",
"area": ["东河区", "昆都伦区", "青山区", "石拐矿区", "白云矿区", "郊 区", "土默特右旗", "固阳县", "达尔罕茂明安联合旗"]
},
{
"name": "乌海",
"area": ["海勃湾区", "海南区", "乌达区"]
},
{
"name": "赤峰",
"area": ["红山区", "元宝山区", "松山区", "阿鲁科尔沁旗", "巴林左旗", "巴林右旗", "林西县", "克什克腾旗", "翁牛特旗", "喀喇沁旗", "宁城县", "敖汉旗"]
},
{
"name": "呼伦贝尔",
"area": ["海拉尔市", "满洲里市", "扎兰屯市", "牙克石市", "根河市", "额尔古纳市", "阿荣旗", "莫力达瓦达斡尔族自治旗", "鄂伦春自治旗", "鄂温克族自治旗", "新巴尔虎右旗",
"新巴尔虎左旗", "陈巴尔虎旗"
]
},
{
"name": "兴安盟",
"area": ["乌兰浩特市", "阿尔山市", "科尔沁右翼前旗", "科尔沁右翼中旗", "扎赉特旗", "突泉县"]
},
{
"name": "通辽",
"area": ["科尔沁区", "霍林郭勒市", "科尔沁左翼中旗", "科尔沁左翼后旗", "开鲁县", "库伦旗", "奈曼旗", "扎鲁特旗"]
},
{
"name": "锡林郭勒盟",
"area": ["二连浩特市", "锡林浩特市", "阿巴嘎旗", "苏尼特左旗", "苏尼特右旗", "东乌珠穆沁旗", "西乌珠穆沁旗", "太仆寺旗", "镶黄旗", "正镶白旗", "正蓝旗", "多伦县"]
},
{
"name": "乌兰察布盟",
"area": ["集宁市", "丰镇市", "卓资县", "化德县", "商都县", "兴和县", "凉城县", "察哈尔右翼前旗", "察哈尔右翼中旗", "察哈尔右翼后旗", "四子王旗"]
},
{
"name": "伊克昭盟",
"area": ["东胜市", "达拉特旗", "准格尔旗", "鄂托克前旗", "鄂托克旗", "杭锦旗", "乌审旗", "伊金霍洛旗"]
},
{
"name": "巴彦淖尔盟",
"area": ["临河市", "五原县", "磴口县", "乌拉特前旗", "乌拉特中旗", "乌拉特后旗", "杭锦后旗"]
},
{
"name": "阿拉善盟",
"area": ["阿拉善左旗", "阿拉善右旗", "额济纳旗"]
}
]
},
{
"name": "辽宁",
"city": [
{
"name": "沈阳",
"area": ["沈河区", "皇姑区", "和平区", "大东区", "铁西区", "苏家屯区", "东陵区", "于洪区", "新民市", "法库县", "辽中县", "康平县", "新城子区", "其他"]
},
{
"name": "大连",
"area": ["西岗区", "中山区", "沙河口区", "甘井子区", "旅顺口区", "金州区", "瓦房店市", "普兰店市", "庄河市", "长海县", "其他"]
},
{
"name": "鞍山",
"area": ["铁东区", "铁西区", "立山区", "千山区", "海城市", "台安县", "岫岩满族自治县", "其他"]
},
{
"name": "抚顺",
"area": ["顺城区", "新抚区", "东洲区", "望花区", "抚顺县", "清原满族自治县", "新宾满族自治县", "其他"]
},
{
"name": "本溪",
"area": ["平山区", "明山区", "溪湖区", "南芬区", "本溪满族自治县", "桓仁满族自治县", "其他"]
},
{
"name": "丹东",
"area": ["振兴区", "元宝区", "振安区", "东港市", "凤城市", "宽甸满族自治县", "其他"]
},
{
"name": "锦州",
"area": ["太和区", "古塔区", "凌河区", "凌海市", "黑山县", "义县", "北宁市", "其他"]
},
{
"name": "营口",
"area": ["站前区", "西市区", "鲅鱼圈区", "老边区", "大石桥市", "盖州市", "其他"]
},
{
"name": "阜新",
"area": ["海州区", "新邱区", "太平区", "清河门区", "细河区", "彰武县", "阜新蒙古族自治县", "其他"]
},
{
"name": "辽阳",
"area": ["白塔区", "文圣区", "宏伟区", "太子河区", "弓长岭区", "灯塔市", "辽阳县", "其他"]
},
{
"name": "盘锦",
"area": ["双台子区", "兴隆台区", "盘山县", "大洼县", "其他"]
},
{
"name": "铁岭",
"area": ["银州区", "清河区", "调兵山市", "开原市", "铁岭县", "昌图县", "西丰县", "其他"]
},
{
"name": "朝阳",
"area": ["双塔区", "龙城区", "凌源市", "北票市", "朝阳县", "建平县", "喀喇沁左翼蒙古族自治县", "其他"]
},
{
"name": "葫芦岛",
"area": ["龙港区", "南票区", "连山区", "兴城市", "绥中县", "建昌县", "其他"]
},
{
"name": "其他",
"area": ["其他"]
}
]
},
{
"name": "吉林",
"city":
本文介绍了如何在uni-app中实现地址的三级联动效果，包括template的样式设置、script中的逻辑代码以及地区数据的js处理。
最低0.47元/天 解锁文章
扫一扫
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
