テーブルの選択ボタンを作るために05
=「multipleTableは」refの
<エル・テーブル> </ ELに追加 -table> され
、一時的に知恵を知っています
02 ==「を使用すると、表内のボックスを選択し、ボタンを追加したい場合は
、<エル・テーブル>に追加されます。</エル -table> クリックイベントで
@選択チェンジ=」handleSelectionChange "
<EL-表REF = "multipleTable"
：データ= "たtableData"
ストライプ
スタイル= "幅：100％"
@選択チェンジ= "handleSelectionChange"
クラス= "ベーステーブル">
03 == "ときの子供の父親は合格
カッコメソッド内の親コンポーネントを追加しないでください
getSelectValue（）" X- ON-handleSelection = @ "を
@ ON-handleSelection =" getSelectValue「V
04 == "チェックボックスがで表示され、V-IF =" ifShowSelect "
<EL-テーブル列の
V-IF = "ifShowSelect"
タイプ= "選択"
幅= "55">
</ EL-テーブル列>
小道具：{
ifShowSelect：ブール、
}、
<テンプレート> <IL- テーブル REF = "multipleTable" ：データ = "たtableData" ストライプ スタイル = "幅：100％" @selection -change = "handleSelectionChangevalue" クラス = "ベーステーブル"> <EL-卓上列 V - もし = "ifShowSelect" タイプ = "選択" 幅 = "55"> </ EL-テーブル列> <EL-卓上列 V - のため = "tabColumnアイテム" ：キー= "item.prop" ：小道具 = "item.prop" ：ラベル = "item.label" ：揃える = "item.align" 空 -text = "暂无数据" > </エル・テーブルのカラム> < -操作下面的数据- >！ <EL-テーブル- コラム ALIGN = "センター" 幅 = "60" ラベル = "操作"> <テンプレートスロットスコープ= "スコープ"> <DIV CLASS = "TableColumnの制御"> <私はV- 場合 = "！scope.row.showBtn "@のMouseEnter =" handleMouseEnter（scope.row）」クラス= "iconfontアイコン-より"> </ i>は 、<DIV：クラス= "{単一：単一}"V- 他 mouseleave = "handleMouseLeave（scope.row）" @> <スパンV- 場合= "！シングル" @> = "handleStop（scope.row）"をクリックし="scope.row.status == 0"> 場合 <a V- 停用</a>の <a V- 他 >启用</ A > </ span>の <スパン@をクリック= "handleEdit（スコープ）">编辑</ span>を </ div> </ div> </テンプレート> </エル・テーブルのカラム> </エル・テーブル> </テンプレート> <スクリプト> エクスポートデフォルト{ データ（）{ リターン{ // 多选数据 multipleSelection：[] }。 }、 // 配列型 必須：trueに // 価値なければならない } // フィールドパターン tabColumn：{ 型：Array、 必須：trueに }、 SINGLE：ブール、 ifShowSelect：ブール、 }、 メソッド：{ / * マウスに削除* / {handleMouseEnter（行） row.showBtn = trueに }、 handleMouseLeave（行）{ row.showBtn = falseに } // handleStop（行）{ この。$発する（ "オン停止" 、行） } // 编辑 handleEdit（行）{ この。$発する（ "オン編集" 、行） } // 选择框中的 handleSelectionChangevalue（ヴァル）{ // this.multipleSelection =ヴァル; //ヴァル是获取的值 この $発する（ "-handleSelectionオン" 、ヴァル） } } }。 </ SCRIPT> <スコープスタイルのlang = "SCSS"> .base - テーブル{ .tableColumn - 制御{ 高さ：は50px。 行 - 高さ：は50px; 私 { 色：＃487ff6。 カーソル：ポインタ; } スパン{ 表示：インライン - ブロック。 カーソル：ポインタ; ＆：直前に入って子{ 色：＃487ff6。 マージン - 左：10pxの; } } DIV { テキスト - 整列：センター; 背景：＃1 D0E9FF。 位置：絶対; Z -index：999 ; 左： - 40ピクセル; トップ： 0 ; 幅：100ピクセル; ＆.single { 幅：60PX; 左：0 ; スパン{ マージン - 左：0PX。 } } } } } </スタイル> <スタイル> .base -table.elテーブルTD {パディング：0 。} </スタイル>
<テンプレート>
の<div>
< Myタブ
：ifShowSelect = "ifShowSelect"
：たtableData = "たtableData"
：tabColumn = "tabColumn"
@on -stop = "sonGiveChange"
@on -edit = "sonGiveStop"
@on -handleSelection = "getSelectValue" >
</ Myタブ>
</ div>
</テンプレート>
の<script>
からの輸入Myタブ "../../../components/my-tab" 。
エクスポートデフォルト{
データ（）{
リターン{
// テーブルデータ
TABLEDATA：[
{
DATE："2016年5月2日" 、
名称： "Xiaohu" 、
アドレス： "レーン上海1518" 、
電話： "18383838" 、
showBtn：falseに
}、
{
DATE： "2016年5月4日" 、
名称：「小劇"
アドレス： "普レーン1517 "
電話： " 18383838 "
showBtn：偽へ
}、
{
DATE： " 2016年5月1日」、
名：「王」
のアドレス：、 "普レーン1519" 、
電話： "18383838" 、
showBtn：偽へ
}、
{
DATE： "2016年5月3日" 、
名称： "王のHu" 、
アドレス： "普区レーン1516" 、
TEL： "18383838" 、
showBtn：偽へ
}
]
// フィールドの配列
tabColumn：[
{
小道具： "日付" 、
ラベル： "日付" 、
揃えます："左"、
showBtn： "偽"
}、
{
プロパ： "名前"を、
ラベル： "姓名"を、
整列： "中央" 、
showBtn： "偽の"
}、
{
プロパ： "住所" 、
ラベル： "地址" 、
整列：「中心" 、
showBtn： "偽"
}、
{
プロパ： "TEL" 、
ラベル： "电话"、
揃えます："センター" 、
showBtn： "真の"
}
]、
ifShowSelect：trueに、// チェックボックス真==「表示を表示するかどうか
;}
}、
コンポーネント：{
Myタブ
}、
メソッド：{
sonGiveChange（ベール）{
にconsole.log（ "息子が私のメソッドに渡された" ）、ベールを;
}、
sonGiveStop（値）{
にconsole.log（ "私は編集方法息子に転送" 、値）;
}、
getSelectValue（値）{
にconsole.log（「息子転送私のデータチェックボックス"を与える、値）
}
}
};
</ SCRIPT>
<スタイルスコープ> / * にhttp：// localhost：8080 /＃/ベーシック/レイアウト/私の-YS-テーブル* /
</スタイル>
