背景：使用 vue 脚手架创建的 uniapp 项目，主要开发 h5,兼容处理小程序
实现：使用 uniapp 中 picker 标签 对 后台地区数据结构 做处理
index.vue
<template>
<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector" style="display: flex; justify-content: space-between">
<u--input v-model="adressInfo.area" fontSize="14px" disabled disabledColor="#fff" placeholderStyle="color:#8c8c8c;fontSize:14px" placeholder="请选择地区" border="none"></u--input>
</picker>
</template>
<script>
import MAI from '@/static/js/areaData';
let selectVal = ['', '', ''];
export default {
data() {
return {
value: [18, 0, 0], // 默认值：广东省广州市
array: [],
index: 0,
};
},
created() {
this.initSelect();
},
methods: {
// 初始化地址选项
initSelect() {
this.updateSourceDate() // 更新源数据
.updateAddressDate() // 更新结果数据
.$forceUpdate(); // 触发双向绑定
},
// 地址控件改变控件
columnchange(d) {
this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
.updateSourceDate() // 更新源数据
.updateAddressDate() // 更新结果数据
.$forceUpdate(); // 触发双向绑定
},
/**
* 更新源数据
* */
updateSourceDate() {
this.array = [];
this.array[0] = MAI.map(obj => {
return {
name: obj.name,
};
});
this.array[1] = MAI[this.value[0]].cityList.map(obj => {
return {
name: obj.name,
};
});
this.array[2] = MAI[this.value[0]].cityList[this.value[1]].areaList.map(obj => {
return {
name: obj.name,
};
});
return this;
},
/**
* 更新索引
* */
updateSelectIndex(column, value) {
let arr = JSON.parse(JSON.stringify(this.value));
arr[column] = value;
if (column === 0) {
arr[1] = 0;
arr[2] = 0;
}
if (column === 1) {
arr[2] = 0;
}
this.value = arr;
return this;
},
/**
* 更新结果数据
* */
updateAddressDate() {
selectVal[0] = this.array[0][this.value[0]].name;
selectVal[1] = this.array[1][this.value[1]].name;
selectVal[2] = this.array[2][this.value[2]].name;
return this;
},
/**
* 点击确定
* */
bindPickerChange(e) {
this.$emit('change', {
index: this.value,
data: selectVal,
array: this.array,
});
// 复制绑定数据
return this;
},
},
};
</script>
