Vueが複数の選択肢ボックスのラジオを使用して達成しました

 

インタフェーススタイル：

 < divのクラス= "right_con" V-IF = "isClickApply" スタイル= "国境：なし" > 
                    < テーブルクラス= "ワークテーブルベース・テーブル" > 
                        < THEAD > 
                            < TR > 
                                < 目> 
                                    < チェックボックスVモデル= "hasAllChecked" @に変化= "chooseAll" > </ チェックボックス> 
                                </ 番目> 
                                < 番目のスタイル= "テキスト整列：左;幅：30％" >姓名</ 目> 
                                < 番目のスタイル= "幅：30％" >電話番号</ TH > 
                                < TH スタイル= "幅：30％" >アプリケーションのタイム</ TH >

                                < 番目のスタイル= "幅：10％" >操作</ 番目> 
                            </ TR > 
                        </ THEAD > 
                        < TBODY V-IF = "applyUserList && applyUserList.length> 0" > 
                            < TR V-用」=（項目、インデックス） applyUserListで」：キー= "インデックス" > 
                                < TD > 
                                    < チェックボックス
                                         V-モデル= "item.hasSelected" 
                                        @に変更= "chooseSingle（アイテム）" 
                                    > </ チェックボックス> 
                                </ TD> 
                                < TD > {{item.trueName}} </ TD > 
                                < TD > {{item.phone}} </ TD > 
                                < TD > {{item.addTime}} </ TD > 
                                < TD スタイル= "表示：フレックス; aligin-アイテム：センター" > 
                                    < ボタンクラス= "同意" @click = "agreeClick（[item.id]）" >通过</ ボタン> 
                                    <！ - <DIV CLASS = "同意する"をクリックし@ =" agreeClick（[item.id]） ">通过</ DIV> - >
                                    <！ -<DIV CLASS = "同意できないが、" @ "disagreeClick（[item.id]）"をクリックしてください=>驳回</ DIV> - > 
                                    < ボタンクラス= "同意" @click = "disagreeClick（[item.id]）" >驳回</ ボタン> 
                                </ TD > 
                            </ TR > 
                        </ TBODY >

                        < TBODY V-ELSE > 
                            < trのスタイル= "テキスト整列：センター;" > 
                                < TD COLSPAN = "5" >暂无数据</ TD > 
                            </ TR > 
                        </ TBODY > 
                    </ テーブル>

                    < ページ
                         ショーの合計
                        ：合計= "合計" 
                        ：ページサイズ= "サイズ" 
                        ：現在= "現在" 
                        に変更@ = "changePage" 
                        クラス= "page_switch_class" 
                        V-IF = "applyUserList && applyUserList.length> 0" 
                    /> 
                </ DIV >

主なパラメータ：

hasAllChecked（かどうか、すべて選択）

を選択する方法：

 // すべて选で
        chooseAll、（ヴァル）、{
             VARの自己= ズンバと
            、もし、（ヴァル）、{
                self.applyUserList.forEach（ELE => {
                    ele.hasSelected = 真
                }）
            } 他{
                self.applyUserList.forEach（ELE => {
                    ele.hasSelected = 偽
                }）
            }
        }、

説明：すべての増加はパラメータをhasSelected手動ですべて選択をクリックしたときの配列を表示するためにトラバース、すべてのパラメータがtrueの場合、およびその逆に設定hasSelected。

ラジオ方法：

  // 单选
        chooseSingle（アイテム）{
             VARの自己= この
            self.hasAllCheckedは = 真
            self.applyUserList.forEachを（ELE => {
                 場合（！ele.hasSelected）self.hasAllChecked = 偽
            }）
        }、

説明：配列は、その後、falseに設定hasSelected、項目を選択した場合hasSelected選択の配列の最初の代表がtrueに設定され、トラバースは、表示される、の代表者すべてを非は、選択します。

 バッチによって：

  // 批量通过
        agreeAll（）{
             VARの自己= この
            VAR isSelected = falseを
            self.applyUserList.forEach（ELE => {
                 場合（ele.hasSelected）isSelected = 真
            }）

            もし（isSelected）{
                 VARのメンバー= []
                self.applyUserList.forEach（ELE => {
                     場合（ele.hasSelected）members.push（ele.id）
                }）
                self.agreeClick（メンバー）
            } 他{
                セルフ。$ app.error（「あなたは、メンバーが承認を必要とする選択しませんでした」）
            }
        }、

バッチは拒否しました：

   // バッチは拒絶
        disagreeAll（）{
             VARのセルフ= この
            VAR isSelected = falseに
            self.rejectIds = []
            self.applyUserList.forEach（ELE => {
                 場合（ele.hasSelected）isSelected = 真
            }）

            もし（isSelected）{
                self.applyUserList.forEach（ELE => {
                     場合（ele.hasSelected）self.rejectIds.push（ele.id）
                }）
                self.title = 
                    self.rejectIds.length > 1 'バルク理由は拒否'：？原因'拒否' 
                self.rejectReason = '' 
                self.modal12 = trueに
            } 他{
                セルフ。$ app.error（「あなたは、メンバーが承認を必要とする選択しませんでした」）
            }
        }、