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;"><viewclass="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><viewclass="u-flex u-flex-between"style="width: 75%;"@click="handAddrClick"><view class="" style="width: 90%;"><u--inputplaceholder="请选择省市区县"border="none"readonlyv-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、valuesconfirm(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>