html部分:
选择用户 {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
要先将后端传回的数据做个处理 :
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; }
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...