Vue実装チェックボックス、一括操作

selectIds配列の宣言:

    data: {
        whiteCardList: [],
        selectIds: []
    },

リストの取得方法:ここで得られたデータリストにfalseというcheckedのプロパティを追加し、ループ表示データテーブルでv-model=「whiteCard.checked」を選択ボックスにバインドします.これは、ページデータが再ロードされるたびに選択ボックスが選択されていない状態になるためです.

        //        
        getWhiteCardList: function () {
            var _this = this;
            axios.post("http://127.0.0.1:8080/yunjie/MakeCard/SelectWhiteListCard", {
                Token: _this.token,
                Data: {
                    CardSerialNo: _this.cardSerialNo,
                    CardStatus: _this.cardStatus
                }
            }).then(function (response) {
                if (response.data.Result == 0) {
                    // alert("1");
                    _this.whiteCardList = response.data.Data;
                    if (_this.whiteCardList.length > 0){
                        for (var i = 0; i < _this.whiteCardList.length; i++){
                            _this.whiteCardList[i].Checked=false;
                        }
                    }
                } else {
                    alert(response.data.Msg);
                }
                //              
                 _this.selectIds=[];
            })
        },

データテーブル:

     
                
                    
                    
                        
                    
                    
                        {{whiteCard.CardSerialNo}}
                    
                    
                        {{whiteCard.CardNo}}
                    
                    
                        {{whiteCard.CardTypeName}}
                    
                    
                        {{whiteCard.CardStatusName}}
                    
                
                

選択セットの更新方法:

        //     
        updateIds: function ($event, CardNo) {
            // alert($event.target.checked);
            if ($event.target.checked) {
                //      ,  selectIds
                this.selectIds.push(CardNo);
            } else {
                //     
                var idx1 = this.selectIds.indexOf(CardNo);
                this.selectIds.splice(idx1, 1);
            }
        }

補足:全選択を実現する方法:注意:ここで全選択ボックスにバインドする必要があるイベントはイベントを変更することであり、イベントをクリックすることではありません.クリックイベントは選択ボックスが変更される前に実行されます.すなわち、もともと全選択ボックスはfalseが選択されていない状態です.私たちが全選択ボックスをクリックするには、データをすべて選択する必要があります.つまり、選択ステータスはtrueである必要があります.そのため、変更イベント、すなわち@change=「selectAll」を使用してこそ、私たちのニーズに合致します.

       selectAll: function ($event) {
            //           
            if ($event.target.checked){
                if (this.whiteCardList.length > 0){
                    for (var i = 0; i < this.whiteCardList.length; i++){
                        this.whiteCardList[i].Checked=true;
                        this.selectIds.push(this.whiteCardList[i].CardNo)
                    }
                }
            }else {
                //            ,  selectIds
                this.selectIds = [];
            }

        }