uniapp-地区选择器
之前在网上借鉴其他大佬的组件，用的时候发现点问题，地址对不上，后面又重新搞了个文件，做了点改动
效果图如下：
data.js
链接: https://pan.baidu.com/s/1FlN7qHiiL_NFU94f9nnIYg. 提取码: 95sh
pickerAddress.vue
<template>
<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector" style="display:flex;justify-content: space-between;">
<slot></slot>
</picker>
</template>
<script>
import AllAddress from './data.js'
let selectVal = ['','','']
export default {
data() {
return{
value: [0,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] = AllAddress.map(obj => {
return {
name: obj.name
}
})
this.array[1] = AllAddress[this.value[0]].cityList.map(obj => {
return {
name: obj.name
}
})
this.array[2] = AllAddress[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>
<style>
</style>
使用组件的方法
<template>
<pickerAddress @change="change">
{
{
value}}
</pickerAddress>
</template>
<script>
import pickerAddress from './components/pickerAddress/pickerAddress.vue'
export default {
components: {
pickerAddress
},
data() {
return {
value："请选择地区"
}
}，
methods: {
change(data) {
this.value = data.data.join('')
}
}
}
</script>