複数の選択肢、複数の選択肢と空に機能を追加するための表形式でelementUi

シンプルで複数の選択肢を達成：マニュアルを追加しel-table-column、セットtypeの属性がselectionあることができます。

<テンプレート> 
  <IL- テーブル
    REF = " multipleTable " 
    ：データ ="たtableData" 
    ツールチップ効果- = "暗い" 
    スタイル = "幅：100％" 
    @selection -change = "handleSelectionChange"> 
    <EL-卓上列
      タイプ = "選択" 
      幅 = "55"> 
    </ EL-テーブル列> 
    <EL-卓上列
      ラベル = "日期" 
      幅 = "120"> 
      <テンプレートスロットスコープ= "範囲"> {{scope.row。日付}} </テンプレート>
    </ EL-テーブル列> 
    <EL-卓上列
      プロップ= "名前" 
      ラベル = "名前" 
      幅 = "120"> 
    </ EL-表カラム> 
    <EL-卓上列
      プロップ = "アドレス" 
      ラベル = "アドレス" 
      を表示 -overflow-ヒント> 
    </ EL-表-column> 
  </ EL-表> 
  <divのスタイル= "マージントップ：20ピクセル"> 
    <ボタン-EL @ =をクリックして"toggleSelection（[TABLEDATA [1]、TABLEDATA [2]。]） " >第2のスイッチと、第一選択された状態の三行</ EL-ボタン> 
    <ボタン-EL @ =をクリックして"toggleSelection（） ">選択解除</ EL-ボタン> 
  </ div> 
</テンプレート>

選択したmultipleTableのためのデータ・ストレージ・オプションでデータオブジェクトをバインド参考データ：

<スクリプト> 　　
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        TABLEDATA：[{ 
          DATE： '2016年5月3日' 、
          名前： 'Xiaohu' 、
          アドレス： '金沙普陀区ロードレーン1518' 
        }、{ 
          DATE： '2016年5月2日' 、
          名称： 'Xiaohu' 、
          アドレス： '沙普区道路レーン1518' 
        }、{ 
          DATE： '2016年5月4日' 、
          名称： 'Xiaohu' 、
          アドレス：「上海普陀区金沙河道1518、レーン"
        }、{
          日付： '2016年5月1日' 、
          名称： 'Xiaohu' 、
          アドレス： '沙普区道路レーン1518' 
        }、{ 
          DATE： '2016年5月8日' 、
          名称： 'Xiaohu' 、
          アドレス： '普区沙ロードレーン1518' 
        }、{ 
          DATE： '2016年5月6日' 、
          名称： 'Xiaohu' 、
          アドレス： '普区沙ロードレーン1518' 
        }、{ 
          DATE：「2016 -05-07 ' 
          名前： ' Xiaohu " 、
          住所： '普陀区金沙ロードレーン1518 " 
        }]、
         multipleSelection：[] //ラインデータの選択されたセットを格納する 
      }
    }、

    メソッド：{
      toggleSelection（行）{
        （行）IF { 
          rows.forEach（行= > { 
            この$ refs.multipleTable.toggleRowSelection（行）; 
          }）; 
        } 他 { 
          ..この$、参考文献multipleTable .clearSelection（）; //クリアオプション、プロジェクト：要求インタフェースの後、再レンダリングのページを要求されたデータ、チェックをクリア状態を選択し、このモードを使用します。
        } 
      }、
      HandleSelectionChange（ヴァル）{
        この.multipleSelection =ヴァル;
      }
    }
  }
</ SCRIPT>

このプロジェクトは、データのみの操作を選択することができる場合：

@選択変更イベント：変化トリガオプション

<IL- テーブル
        @selectionの -change = "handleSelectionChange" 
        REF = "multipleTable" 
        ：キー = "tableKey" 
        ：データ = "たtableData" 
        行 -key = "ID" 
        のV -loading = "tableLoading" 
        要素 -loadingテキスト=」给我一点时间」
        フィット
        サイズ = 『ミニ』
        ツールチップ効果- = 『暗い』
        スタイル = 『幅：100％;フォントサイズ：12ピクセル;マージン下：15ピクセル;国境半径：3px;』
        ：ヘッダー -cellスタイル= "tableHeaderColor" 
      >

方法：方法

handleSelectionChange（ヴァル）{データの//戻り値が設定されているヴァル選択行
       この .multipleSelection = val.map（項目=> item.id）;
       この .isProcurementStatus = val.map（項目=> item.procurementStatus）;
       この。 = val.map forDialogTitle（項目=> item.purchaseProject）; 
    }

MultipleSelection所定の長さは、選択された数によって決定されます

複数の選択肢、複数の選択肢と空に機能を追加するための表形式でelementUi

おすすめ