个人觉得这种场景还是挺更多的,特此总结记录一下
// 全选、取消全选
handleAllSelected() {
this.allSelected = !this.allSelected;
if (this.allSelected) {
this.vemsList.map(v => {
if (v.vemFillStatus === 1) { // 除去某种特定的状态
v.isSelected = true;
}
})
} else {
this.vemsList.map(v => {
if (v.vemFillStatus === 1) {
v.isSelected = false;
}
})
}
}
// 单个选中、取消选中
handleItemSelected(item) {
// 禁用也可以触发点击事件
if (item.disabled) {
return;
}
const handleItem = this.vemsList.find(v => {
return v.id === item.id;
})
handleItem.isSelected = !handleItem.isSelected;
// 过滤出待补货
const toReplenishedVems = this.vemsList.filter(v => {
return v.vemFillStatus === 1;
})
// 控制全选按钮是否选中
this.allSelected = toReplenishedVems.every(v => { // 此处用了every
return v.isSelected === true;
})
}
动态设置checkbox是否显示,是否禁用
// 获取待补货的售货机列表
getReplenishedVemsList() {
const params = {
fillNo: this.fillNo,
tenantId: this.userInfo.tenantId
}
uni.showLoading({
title: this.lang.global.loading
});
this.$snbc.$service.$operationmanager.xxxx(params).then((res) => {
uni.hideLoading();
if (res.code === this.$snbc.$constant.RESULT_CODE) {
this.fillDetails = res.result;
this.reviewComments = res.result.remark?res.result.remark:'';
const vemsList = res.result.vemsList;
vemsList.map(v => {
v.disabled = false;
v.showCheckbox = false;
v.isSelected = false;
// 售货机的补货状态:待补货 才能选
if (v.vemFillStatus === 2) {
v.disabled = true;
}
return v;
})
this.vemsList = vemsList;
} else {
uni.showToast({
title: res.message,
icon: 'none'
});
}
}).catch(() => {
uni.hideLoading();
});
},