需求
- 业务需求 数据从后台Ajax请求获取出来
- 然后使用uniapp picker组件进行数据的渲染
- 然后传递给后台的是省市区的code码拼接
实现
uniapp代码如下
- HTML部分
<!-- vue HTML代码 -->
<picker
mode="multiSelector"
@columnchange="bindMultiPickerColumnChange"
:value="addressIndex"
:range="addressData">
<view class="uni-input" @tap="defaultArea">
{
{addressText || "地区"}}
</view>
</picker>
- JavaScript部分
import {
listProvincesData } from "../../api/request.js";//这里是ajax请求获取省市区全部数据
export default {
data(){
return {
provinces: [],//省份数据
citys: [],//市级数据
areas: [],//区级数据
address: [],//全部数据
addressData: [],
addressIndex: [0, 0, 0],//省市区索引
areaCode: [],//code 码
}
},
onLoad(){
// 获取省市区数据
listProvincesData().then(response => {
this.provinces = response.data.filter(item => item.level === 1)
this.citys = response.data.filter(item => item.level === 2 && item.pid === this.provinces[0].id);
this.areas = response.data.filter(item => item.level === 3 && item.pid === this.citys[0].id);
this.addressData[0] = this.provinces.map(item => item.name);
this.addressData[1] = this.citys.map(item => item.name);
this.addressData[2] = this.areas.map(item => item.name);
this.address = response.data;
// tips:如果是app的情况下，如果不加这个数据会加载不出来，小程序则没有这个问题
this.$forceUpdate()
});
},
methods:{
/**
* @function
* @description picker组件切换地址的时候进行调用的函数
* **/
bindMultiPickerColumnChange(e) {
let val = e.detail.value;
let column = e.detail.column;
this.addressIndex[column] = val;
if (column === 0) {
this.citys = this.address.filter(item => item.level === 2 && item.pid === this.provinces[val].id);
this.areas = this.address.filter(item => item.level === 3 && item.pid === this.citys[0].id);
this.addressData[1] = this.citys.map(item => item.name);
this.addressData[2] = this.areas.map(item => item.name);
this.addressIndex.splice(1, 1, 0);
this.addressIndex.splice(2, 1, 0);
} else if (column === 1) {
this.areas = this.address.filter(item => item.level === 3 && item.pid === this.citys[val].id);
this.addressData[2] = this.areas.map(item => item.name);
this.addressIndex.splice(2, 1, 0);
} else if (column === 2) {
this.addressIndex.splice(2, 1, val);
}
// let areaStr = "";
// let data = [this.provinces, this.citys, this.areas];
// this.areaCode = [];
// this.addressIndex.forEach((item, index) => {
// areaStr += data[index][item].name;
// this.areaCode.push(data[index][item].id);
// });
// this.addressText = areaStr;
},
/**
* @function
* @description 由于初始默认的时候，如果不进行下拉则没有值，同时进行数据的追寻，找到省市区所在位置
* **/
defaultArea() {
if (this.type === 'add' && this.areaCode.length === 0) {
this.areaCode = [this.provinces[0].id, this.citys[0].id, this.areas[0].id];
this.addressText = this.areaCode.map(item => this.address.find(ii => ii.id === item).name).join(',');
} else {
this.citys = this.address.filter(item => item.level === 2 && item.pid == this.areaCode[0]);
this.areas = this.address.filter(item => item.level === 3 && item.pid == this.areaCode[1]);
this.addressData[1] = this.citys.map(item => item.name);
this.addressData[2] = this.areas.map(item => item.name);
let index1 = this.provinces.findIndex(item => item.id == this.areaCode[0]);
let index2 = this.citys.findIndex(item => item.id == this.areaCode[1]);
let index3 = this.areas.findIndex(item => item.id == this.areaCode[2]);
this.addressIndex = [index1, index2, index3];
}
},
},
}