美文网首页
vue 全选,取消全选,单个选中,某种状态不显示checkbox

vue 全选,取消全选,单个选中,某种状态不显示checkbox

作者: 轩轩小王子 | 来源:发表于2023-04-11 13:07 被阅读0次
个人觉得这种场景还是挺更多的,特此总结记录一下
// 全选、取消全选
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();
                });
            },

相关文章

网友评论

      本文标题:vue 全选,取消全选,单个选中,某种状态不显示checkbox

      本文链接:https://www.haomeiwen.com/subject/nvwordtx.html