uniapp(uni-app)picker组件使用，自定义三列数据，三级联动，开箱即用（点关注，不迷路）
一、不用安装导入，直接复制粘贴代码即可
二、废话不说，直接上代码
- 模板代码
<template>
<view>
<view class="uni-list-cell-db"
style="margin-left:10px;width:95%;height: 40px;line-height:40px;border: 1px solid #aaa5;border-radius: 5px;font-size12px;text-align:center;">
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
@change="changePicker" :range="multiArray">
<view class="uni-input">
<!-- 第一列+第二列+第三列显示的数据 -->
{
{
multiArray[0][multiIndex[0]]}}{
{
multiArray[1][multiIndex[1]]}}{
{
multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
</view>
</template>
- js代码
<script>
export default {
data() {
return {
multiArray: [//现实的内容
[],
[],
[]
],
multiIndex: [0, 0, 0],//显示的下标
listData:[
{
"shortCode": "622921100",
"regionName": "乡镇1",
"children": [
{
"shortCode": "622921100001",
"regionName": "乡镇1居委会1",
"children": [
{
"shortCode": "622921100001001",
"regionName": "11社区1",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
},
{
"shortCode": "622921100001",
"regionName": "乡镇1居委会2",
"children": [
{
"shortCode": "622921100001001",
"regionName": "社区1",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
}
],
"pshortCode": "622921"
},
{
"shortCode": "622921100",
"regionName": "乡镇2",
"children": [
{
"shortCode": "622921100001",
"regionName": "乡镇2居委会1",
"children": [
{
"shortCode": "622921100001001",
"regionName": "社区1",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
},
{
"shortCode": "622921100001",
"regionName": "乡镇2居委会2",
"children": [
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
}
],
"pshortCode": "622921"
},
{
"shortCode": "622921100",
"regionName": "乡镇3",
"children": [
{
"shortCode": "622921100001",
"regionName": "乡镇3居委会1",
"children": [
{
"shortCode": "622921100001001",
"regionName": "社区1",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
},
{
"shortCode": "622921100001",
"regionName": "乡镇居委会2",
"children": [
{
"shortCode": "622921100001001",
"regionName": "社区1",
"pshortCode": "622921100001"
},
{
"shortCode": "622921100001001",
"regionName": "社区2",
"pshortCode": "622921100001"
}
],
"pshortCode": "622921100"
}
],
"pshortCode": "622921"
}
]
}
}
methods: {
//点击完成
changePicker() {
this.getAllData()
},
//递归查询id
findRegionByRegionName(data, regionName) {
for (let i = 0; i < data.length; i++) {
const region = data[i];
if (region.regionName === regionName) {
return region;
}
if (region.children) {
const foundRegion = this.findRegionByRegionName(region.children, regionName);
if (foundRegion) {
return foundRegion;
}
}
}
return null;
},
//处理数据为目标格式
processing(one, two) {
this.multiArray[0] = this.listData.map(item => item.regionName)
this.multiArray[1] = this.listData[one].children.map(item => item.regionName)
this.multiArray[2] = this.listData[one].children[two].children.map(item => item.regionName)
},
//picker滑动改变时触发
bindMultiPickerColumnChange(e) {
// console.log('第几列：' + e.detail.column + '，下标值为：' + e.detail.value)
this.multiIndex[e.detail.column] = e.detail.value ? e.detail.value : 0
// console.log(this.multiIndex)
switch (e.detail.column) {
case 0: //拖动第1列
switch (this.multiIndex[0]) {
case 0:
this.multiArray[1] = this.multiArray[1]
this.multiArray[2] = this.multiArray[2]
break
case 1:
this.multiArray[1] = this.multiArray[1]
this.multiArray[2] = this.multiArray[2]
break
}
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
this.processing(this.multiIndex[0], this.multiIndex[1])
break
case 1: //拖动第2列
switch (this.multiIndex[0]) {
//判断第一列是什么
case 0:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = this.multiArray[2]
break
case 1:
this.multiArray[2] = this.multiArray[2]
break
}
break
case 1:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = this.multiArray[2]
break
case 1:
this.multiArray[2] = this.multiArray[2]
break
}
break
}
this.multiIndex.splice(2, 1, 0)
break
}
this.processing(this.multiIndex[0], this.multiIndex[1])//重新设置显示数据
var id = this.findRegionByRegionName(this.listData, this.multiArray[2][this.multiIndex[2]]);//获取id
this.shortCode = id.shortCode//获取数据shortCode
console.log(this.shortCode)
},
},
}
</script>
注意：肯定需要改改才能用啊，哪有那么合适的，但是主要功能都有了，还怕啥，要是有啥问题随时评论区问