フォームのiView状態のチェックボックスの前にスイッチの実行可能な行全体またはラジオボタンをクリックします

ラジオボタンとチェックボックスのトリガーイベントのiViewの表は、トリガーにあるボタンをクリックしないトリガー、@上の行をクリックすることによって達成することができます他の場所でのカウンターパートをクリックし提供されています。

 

< テンプレート> 
    < divの> 
         < 表のストライプ:列= "列" データ:= "件のデータ" の行クリック@ = "clickRow" REF = "表" の選択・変更@ = "のSelectionChange" </> > 
    </ DIV > 
</ テンプレート> 

< スクリプト> 
    エクスポートデフォルト{ 
        データ(){ 
            リターン{ 
                DATAS:[]、
                カラム:[]、
                エンコード。"" 
                taskSelectList:[] 
            } 
        }、
        マウント(){ 

        }、
        メソッド:{ 
             / * * 
             *トリガ選択線の形
             * / 
            clickRow(行インデックス){ 
                この.enCode = row.id;    // 無線トリガー
                この$。 refs.table.toggleSelect(インデックス);   // 複数の選択肢トリガ
            }
             / * * 
             *チェックボックスの選択イベント
             * / 
            のSelectionChange(ヴァル){ 
                にconsole.log(ヴァル); 
                この.taskSelectList = ヴァル; 
            }
            / * * 
             *セットヘッダ
             * / 
            setColumns(){ 
                この.Columns = [
                     // チェックボックス
                    { 
                        タイプ:' 選択' 
                        幅:100 
                        ALIGN =左:' センター' 
                    }、
                    // ラジオボタン
                    { 
                        タイトル:' 選択
                        キー:選びました"
                        幅:100 
                        整列:' 中央' 
                        レンダリング:(H、paramsは)=> { 
                            IDせ= params.row.id。
                            フラグましょう=  ;
                            もしこの.enCode === ID){ 
                                フラグ=  
                            } { 
                                フラグ=  
                            } 
                            戻りH(' DIV ' 、[ 
                                H(' ラジオ' 、{ 
                                    小道具:{ 
                                        値:フラグ
                                    } 
                                    に{ 
                                        ' に変更' :()=> {
                                             この.enCode = params.row.id; 
                                        } 
                                    } 
                                }) 
                            ])
                        } 
                    }、
                    { 
                        タイトル:' 番号' 
                        種類:' インデックス' 
                        ALIGN =左:" センター" 
                        のminWidth:80 
                        のmaxWidth:140 
                    }、
                    { 
                        タイトル:' タスク名' 
                        キー:' タスク名' 
                        タイプ:" TEXT " 
                        ALIGN:" 中央" 
                        のminWidth:200 
                        のmaxWidth:360 
                    } 
                ] 
            } 
        } 
    } 
</ スクリプト> 

< スタイルのlang = "スタイラス" スコープ> 

</ スタイル>

 

おすすめ

転載: www.cnblogs.com/stella1024/p/12457860.html