![uView 2.X 的 picker 组件实现省市区县联动选择功能](https://img2023.cnblogs.com/blog/642487/202306/642487-20230607142416106-1024108744.png)
uView 2.X 的 picker 组件实现省市区县联动选择功能
uView 2.X 的 picker 组件实现省市区县联动选择功能
<template>
<view class="container">
<view class="p-card">
<view class="p-title">
<text>收货地址信息</text>
</view>
<view class="" style="margin-top: 22rpx;">
<view
class="u-flex u-flex-between"
style="padding: 26rpx 0;border-bottom: 2rpx solid #ECECEC;"
>
<view class="">
<text style="font-size: 30rpx;font-weight: 400;color: #424242;"
>地区</text
>
</view>
<view
class="u-flex u-flex-between"
style="width: 75%;"
@click="handAddrClick"
>
<view class="" style="width: 90%;">
<u--input
placeholder="请选择省市区县"
border="none"
readonly
v-model="pcaAddr"
></u--input>
<u-picker
:show="addrPickerShow"
ref="uPicker"
:columns="addrList"
keyName="text"
@confirm="confirm"
@cancel="cancel"
@change="changeHandler"
></u-picker>
</view>
<u-icon name="arrow-right" size="15"></u-icon>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pcaAddr: "",
treeList: [
{
text: "北京市",
value: "110000",
children: [
{
text: "北京市",
value: "110100",
children: [
{
text: "东城区",
value: "110101",
},
{
text: "西城区",
value: "110102",
},
],
},
],
},
{
text: "陕西省",
value: "610000",
children: [
{
text: "西安市",
value: "610100",
children: [
{
text: "新城区",
value: "610102",
},
{
text: "碑林区",
value: "610103",
},
],
},
],
},
],
addrPickerShow: true,
addrList: [],
};
},
onLoad() {
this.addrList = [
this.treeList,
this.treeList[0].children,
this.treeList[0].children[0].children,
];
},
methods: {
handAddrClick() {
this.addrPickerShow = true;
},
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
// 微信小程序无法将picker实例传出来,只能通过ref操作
picker = this.$refs.uPicker,
} = e;
// 当第一列值发生变化时,变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例,变化第二列对应的选项
picker.setColumnValues(1, value[0].children);
// picker为选择器this实例,变化第三列对应的选项
picker.setColumnValues(2, value[0].children[0].children);
}
if (columnIndex === 1) {
// picker为选择器this实例,变化第三列对应的选项
picker.setColumnValues(2, value[0].children[index].children);
}
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
console.log("confirm", e);
this.addrPickerShow = false;
},
cancel() {
this.addrPickerShow = false;
},
},
};
</script>
<style scoped>
.container {
width: 100vw;
padding-top: 16rpx;
min-height: calc(100vh - 16rpx);
background: #eff0f5;
}
.p-card {
width: 710rpx;
box-sizing: border-box;
min-height: 100rpx;
background: #ffffff;
border-radius: 16rpx;
margin: auto;
padding: 30rpx 24rpx;
}
.p-card + .p-card {
margin-top: 16rpx;
}
.p-title {
font-size: 34rpx;
font-weight: 500;
color: #232323;
}
</style>