【无标题】

salesforce 自定义表格如何处理checkbox

`

                    <td class="slds-text-align_right" role="gridcell" tabindex="0">
                      <lightning-input type="checkbox-button" style="margin-top:7px;" data-id={item.unit.Id} label="Input Two" name={item.unit.Name} value={item.unit.Id} checked={item.isChecked} disable={} onchange={handleCheckBoxChange} ></lightning-input>
                    </td>
                    <td scope="gridcell">
                      <div class="slds-truncate" title={item.unit.Name} style="text-align: center;"><a href="#" value={item.unit.Id} data-id={item.unit.Id} name={item.unit.Id} onclick={handleUrlClick}>{item.unit.Name}</a></div>
                    </td>
                    <td role="gridcell">
                      <div class="slds-truncate" title={item.unit.Floor__r.Name} style="text-align: center;">{item.unit.Floor__r.Name}</div>
                    </td>
                    <td role="gridcell">
                      <div class="slds-truncate" title={item.GFA} style="text-align: center;">{item.GFA}</div>
                    </td>

                    <td role="gridcell">
                      <div class="slds-truncate" title={item.unitStatus} style="text-align: center;">{item.unitStatus}</div>
                    </td>
                    <td role="gridcell">
                      <div class="slds-truncate" title={item.availableDate} style="text-align: center;">{item.availableDate}</div>
                    </td>
                  <td role="gridcell">
                    <div class="slds-truncate" title={item.GFA} style="text-align: center;">{item.unit.Base_Rent_Of_Last_Tenant__c}</div>
                  </td>
                  <td role="gridcell">
                    <div class="slds-truncate" title={item.GFA} style="text-align: center;">{item.unit.Target_Price__c}</div>
                  </td>
                    <td role="gridcell" style="width: 15.6rem;">                         
                      <!-- <div class="slds-truncate" title={item.unitStatus}>{item.unitStatus}</div> -->
                    </td>
                </tr>
              </template>
            </tbody>` 

 handleCheckBoxChange(event){
        console.log('>>>>>>>event<<<<<<<<', event.target);
        let checkUnit = event.target.value;
        let checkUnitName = event.target.name;
        let isPageChecked = event.target.checked;
        let item = {
            label: checkUnitName,
            name: checkUnit
        };
        //let allDataTemp =this.allData;
        this.allData = this.updateIsChecked(isPageChecked, checkUnit);
        //this.allData[itemIndex].isChecked = true;
        if(isPageChecked) {
            this.items.push(item);
            this.collectionSelectedUnits.push(checkUnit);
            // 选中之后检查是否在之前出现过，如果未出现则添加到insert里面
            if(this.selectItems.indexOf(checkUnit) < 0) {
                this.insertUnits.push(checkUnit);
            }
            console.log('>>>>>datas<<<<<<<',this.datas);
            this.isSelected = true;
          
        } else {
            let filterList= this.items.filter(itemTemp => itemTemp.name!==item.name);
            let filterUnitList= this.collectionSelectedUnits.filter(unitTemp => unitTemp!==checkUnit);
            // 如果复选之后为false的，则需判断之前是否被提交过，如果提交过，则添加到delete units
            if(this.selectItems.indexOf(checkUnit) > -1) {
                this.deleteUnits.push(checkUnit);
            }

            console.log('filterList；', filterList);
            this.items = filterList;
            // this.datas.forEach(element => {
            //     if(element.unit.Id === checkUnit) {
            //         element.isChecked = false;
            //     }
            // });
            this.collectionSelectedUnits = filterUnitList;
            if(this.items.length < 1) {
                 this.isSelected = false;
            }

        }
        if(this.deleteUnits.length > 0) {
            this.isDelete = true;
        }

        if(this.insertUnits.length > 0) {
            this.isInsert = true;
        } 
        console.log('>>>>>>collectionSelectedUnits<<<<<<', this.collectionSelectedUnits)
        console.log('>>>>>>isSelected<<<<<<',this.isSelected);
         console.log('>>>>>>isDelete<<<<<<',this.isDelete);
          console.log('>>>>>>isInsert<<<<<<',this.isInsert);
        console.log('>>>>>>Items<<<<<<',this.items);
    }
        updateIsChecked(isChecked, unitId){
        let itemList=[];
        for (let index = 0; index < this.allData.length; index++) {
            let element = this.allData[index]; 
//            tempWrapper = element;
            if(unitId == element.unit.Id) {
                const tempWrapper = this.deepCopy(element);
                if (isChecked) {
                    tempWrapper.isChecked = true; 
                } else {
                    tempWrapper.isChecked = false;
                }
                itemList.push(tempWrapper);     
            }else{
                itemList.push(element);
            }
        } 
       return itemList;
    }