react 全选 单选 店铺选

单选 选中一条

//详情每一条数据多选  选中其中一个
    handleChangeCheckBox = (item, index, typeVal, e, trades) => {
        
        let {checkedList, checkedRow,keyIDNum} = this.props;    //checkedList  每一条数据   checkedRow 每一行 true false
        let {tradeIdsList,templeNewId,isPrint} = this.state;    //checkedList  每一条数据   checkedRow 每一行 true false
        let checkedListNew = _.cloneDeep(checkedList);//checkedNew每一行数据下的所有的id   checkedListNew所有数据的oid
        let checkedRowNew = _.cloneDeep(checkedRow);//checkedNew每一行数据下的所有的id   checkedListNew所有数据的oid
        let tradeIdsListNew = _.cloneDeep(tradeIdsList);
        let templeNewIdNew = _.cloneDeep(templeNewId);
        let isPrintNew = _.cloneDeep(isPrint);
        console.log('checkedRow',checkedRow)
        if (e.target.checked) {
            //判断数组是否已经有keytid
            let index = _.findIndex(tradeIdsListNew, function (item) {
                return item.keyTid === trades.keyTid
            })
            //index === -1 即没有找到元素的索引值
            if (index !== -1) {
                tradeIdsListNew[index].oids.push(typeVal)
            } else {
                tradeIdsListNew.push({
                    keyTid: trades.keyTid,
                    oids: [typeVal],
                    num:1
                })
            }


            let arr = _.findIndex(templeNewIdNew,function(items){
                return items == item.lastTemplateId
            })
            if(arr == -1){
                templeNewIdNew.push(item.lastTemplateId)
            }


            let arr1 = _.findIndex(isPrintNew,function(items){
                return items === item.isPrint
            })
            if(arr1 !== -1){
                isPrintNew = isPrintNew
            }else{
                isPrintNew.push(item.isPrint)
            }
            
        } else {

            let index = _.findIndex(tradeIdsListNew, function (o) {
                return o.keyTid === trades.keyTid
            })
            let oidsNew = _.filter(tradeIdsListNew[index].oids, function (o) {
                return o !== typeVal;
            })
            if (oidsNew.length > 0) {
                tradeIdsListNew[index].oids = oidsNew;
            } else {
                tradeIdsListNew.splice(index, 1)
            }


            


            let index1 = _.filter(templeNewIdNew, function (o) {
                return o !== item.lastTemplateId
            })
            if (index1.length > 0) {
                templeNewIdNew = index1;
            } else {
                templeNewIdNew = []
            }

            let index2 = _.filter(isPrintNew, function (o) {
                return o !== item.isPrint
            })
            if (index2.length > 0) {
                isPrintNew = index2;
            } else {
                isPrintNew = []
            }
        }
        
        //更新数据   所有的oid
        checkedListNew = e.target.checked ? [...checkedListNew, typeVal] : _.filter(checkedListNew, function (o) {
            return o != typeVal;
        });// 每一条数据选中之后给checkedList数组添加一条数据val  未选中删除一条数据
        this.props.setVal({
            checkedList: checkedListNew,
        })
        this.setState({
            tradeIdsList: tradeIdsListNew,
            templeNewId:templeNewIdNew,
            isPrint:isPrintNew
        }, () => {
            //店铺下所有的oid
             let oidAll = []; //店铺下所有的oid
             let oidRow = []; //匹配到的oid
             for (let i = 0; i < trades.children.length; i++) {
                 for (let j = 0; j < trades.children[i].orderList.length; j++) {
                     oidAll.push(trades.children[i].orderList[j].oid)
                 }
            
             }
             //匹配
             oidAll.forEach(item => {
                 let arr = _.filter(checkedListNew, function (o) {
                     return o == item
                 });
                 if (arr.length > 0) {
                     oidRow.push(arr[0])
                }
            
             })
             if (oidRow.length === oidAll.length) {
                 checkedRow.push(trades.keyTid);//每一行数据的keyid(知道是哪一行数据)
             } else {
                 checkedRow = _.filter(checkedRow, function (o) {
                     return o != trades.keyTid;
                 })
             }
            
            this.props.setVal({
                checkedRow: checkedRowNew,
            })
            //全选
            if (keyIDNum.length === checkedRowNew.length) {
                this.setState({
                    checkedAll: true
                })
            } else {
                this.setState({
                    checkedAll: false
                })
            }
        })

    }
//列表每一条数据多选  选择一行(取消一行选中)
    handleChangeCheckBoxRow = (item, index, e, trades) => {
        // console.log(item, index, e, trades)
        let {tradeIdsList,templeNewId,isPrint} = this.state;
        let {checkedList, checkedRow, keyIDNum} = this.props
        let checkedListNew = _.cloneDeep(checkedList);
        let tradeIdsListNew = _.cloneDeep(tradeIdsList);
        let templeNewIdNew = _.cloneDeep(templeNewId);
        let isPrintNew = _.cloneDeep(isPrint);
        let oidsA = []
        if (e.target.checked) {
            for (let i = 0; i < trades.children.length; i++) {
                for (let j = 0; j < trades.children[i].orderList.length; j++) {
                    checkedListNew.push(trades.children[i].orderList[j].oid)
                    oidsA.push(trades.children[i].orderList[j].oid);
                }
            }
            let index = _.findIndex(tradeIdsListNew, function (o) {
                return o.keyTid === trades.keyTid
            })
            if (index !== -1) {
                tradeIdsListNew[index].keyTid = trades.keyTid
                tradeIdsListNew[index].oids = oidsA
            } else {
                tradeIdsListNew.push({
                    keyTid: trades.keyTid,
                    oids: oidsA,
                    num:1
                })
            }
            //最新打印的面单号 使用的模板
            let index1 = _.findIndex(templeNewIdNew, function (o) {
                return o=== trades.children[0].lastTemplateId
            })
            if(index1 !== -1){
                templeNewIdNew = templeNewIdNew
            }else{
                templeNewIdNew.push(trades.children[0].lastTemplateId)
            }
            //是否打印
            let index2 = _.findIndex(isPrintNew, function (o) {
                return o=== trades.children[0].isPrint
            })
            if(index2 !== -1){
                isPrintNew = isPrintNew
            }else{
                isPrintNew.push(trades.children[0].isPrint)
            }

        } else {
            for (let i = 0; i < trades.children.length; i++) {
                for (let j = 0; j < trades.children[i].orderList.length; j++) {
                    checkedListNew = _.filter(checkedListNew, function (o) {
                        return o != trades.children[i].orderList[j].oid;
                    })
                    oidsA = _.filter(oidsA, function (o) {
                        return o != trades.children[i].orderList[j].oid;
                    })
                }
            }
            let index = _.findIndex(tradeIdsListNew, function (o) {
                return o.keyTid === trades.keyTid
            })
            if (index !== -1) {
                tradeIdsListNew.splice(index, 1)
            }

            let index1 = _.filter(templeNewIdNew, function (o) {
                return o !== trades.children[0].lastTemplateId
            })
            if (index1.length > 0) {
                templeNewIdNew = index1;
            } else {
                templeNewIdNew = []
            }
            //是否打印过
            let index2 = _.filter(isPrintNew, function (o) {
                return o !== trades.children[0].isPrint
            })
            if (index2.length > 0) {
                isPrintNew = index2;
            } else {
                isPrintNew = []
            }
        }
        // console.log('结束',isPrintNew)
        this.props.setVal({
            checkedList: checkedListNew,
        })
        this.setState({
            tradeIdsList: tradeIdsListNew,
            templeNewId :templeNewIdNew,
            isPrint :isPrintNew
        }, () => {
            if (e.target.checked) {
                checkedRow.push(trades.keyTid)
            } else {
                checkedRow = _.filter(checkedRow, function (o) {
                    return o != trades.keyTid;
                })
            }
            console.log('结束',checkedRow)
            this.props.setVal({
                checkedRow: checkedRow
            })
            //全选
            if (keyIDNum.length === checkedRow.length) {
                this.setState({
                    checkedAll: true
                })
            } else {
                this.setState({
                    checkedAll: false
                })
            }
        })
    }
    //最外层多选  选择全部(取消全部选中)
    handleChangeCheckBoxAll = (e) => {
        let {dataSource} = this.props;
        let templeNewIdNew = [];
        let isPrintNew = [];
        let tradeIdsListNew = [];
        let checkedListFull = []
        let checkedListEmpty = []
        let checkedRowTrue = []
        let checkedRowFalse = []
        if (e.target.checked) {
            dataSource.forEach((item, index) => {
                for (let k = 0; k < item.tradeList.length; k++) {
                    let oidsA = [];
                    let tradeObj = {}
                    tradeObj.keyTid = item.tradeList[k].keyTid
                    checkedRowTrue.push(item.tradeList[k].keyTid)
                    for (let i = 0; i < item.tradeList[k].children.length; i++) {
                        templeNewIdNew.push(item.tradeList[k].children[0].lastTemplateId)
                        isPrintNew.push(item.tradeList[k].children[0].isPrint)
                        for (let j = 0; j < item.tradeList[k].children[i].orderList.length; j++) {
                            checkedListFull.push(item.tradeList[k].children[i].orderList[j].oid)
                            oidsA.push(item.tradeList[k].children[i].orderList[j].oid);
                        }
                    }
                    tradeObj.oids = oidsA
                    tradeObj.nums = 1
                    tradeIdsListNew.push(tradeObj)

                }
            })
            console.log('结束',checkedRowTrue)
            this.props.setVal({
                checkedRow: checkedRowTrue,
                checkedList: checkedListFull,
            })
            this.setState({
                checkedAll: true,
                tradeIdsList: tradeIdsListNew,
                templeNewId: templeNewIdNew,
                isPrint: isPrintNew,
            })
        } else {
            tradeIdsListNew = []
            templeNewIdNew = []
            isPrintNew = []
            this.props.setVal({
                checkedRow: checkedRowFalse,
                checkedList: checkedListEmpty,
            })
            this.setState({
                checkedAll: false,
                tradeIdsList: tradeIdsListNew,
                templeNewId: templeNewIdNew,
                isPrint: isPrintNew,
            })
        }

    }
原文地址:https://www.cnblogs.com/isuansuan/p/13684907.html