uni-app 多列picker切换列显示对应内容

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;
	}