![](https://file.jishuzhan.net/article/1788381792319836161/35e32fb2a69f13d2e4277c34d36324a4.webp)
html部分:
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
选择用户
</view>
<view class="uni-list-cell-db">
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
:range="multiArray">
<view class="uni-input">
{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
</view>
</view>
</view>
要先将后端传回的数据做个处理 :
generateMultiArray() {
const branchNames = [...new Set(this.userList.map(user => user.branchName))]; // 获取所有不同的 branchName
this.userNameByBranch = []; // 根据 branchName 分组 userName
branchNames.forEach(branch => {
this.userNameByBranch[branch] = this.userList
.filter(user => user.branchName === branch)
.map(user => user.userName);
});
console.log('userNameByBranch', this.userNameByBranch)
// 构建 multiArray
const multiArray = [
branchNames,
this.userNameByBranch
];
this.multiArray = multiArray;
this.bindMultiPickerColumnChange({ detail: { column: 0, value: 0 } }); // 设置默认选择
},
后端返回的数据格式如下 "list": [
{
"userId": 1,
"userName": "王三",
"branchName": "软件部"
},
{
"userId": 2,
"userName": "李四",
"branchName": "软件部"
},
{
"userId": 3,
"userName": "赵六",
"branchName": "软件部"
},
{
"userId": 4,
"userName": "王齐",
"branchName": "软件部"
},
{
"userId": 4,
"userName": "发寒热",
"branchName": "项目部"
},
{
"userId": 4,
"userName": "王总",
"branchName": "总经理"
}
]
然后写切换逻辑:
bindMultiPickerColumnChange(e) {
console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)
this.multiIndex[e.detail.column] = e.detail.value
// 如果修改的是第一列
if (e.detail.column === 0) {
// 获取用户选择的分支名称
const selectedBranch = this.multiArray[0][e.detail.value];
// 根据选择的分支名称更新第二列的值
const userNameArray = this.userNameByBranch[selectedBranch] || []; // 获取对应分支名称的用户名数组
// 更新第二列的值为对应的用户名数组
this.multiArray[1] = userNameArray;
// 重置第二列的选择索引为0
this.multiIndex[1] = 0;
}
// 强制更新视图
this.$forceUpdate();
},
css部分:
.uni-list {
background-color: #f6f6f6;
position: relative;
width: 96%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.uni-list:after {
position: absolute;
z-index: 10;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: white;
}
.uni-list-cell {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-cell-left {
white-space: nowrap;
font-size: 28rpx;
padding: 0 30rpx;
}
.uni-list-cell-db {
flex: 1;
}
.uni-input {
height: 50rpx;
padding: 15rpx 25rpx;
line-height: 50rpx;
font-size: 28rpx;
background: #f6f6f6;
flex: 1;
}