<！DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> </ TITLE>
<リンクのrel = " スタイルシート"タイプ= " テキスト/ cssの"のhref = " http://unpkg.com/iview/dist/styles/iview .css " >
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " http://vuejs.org/js/vue.min.js " > </ SCRIPT>
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " HTTP ：//unpkg.com/iview/dist/iview.min.js " > </ SCRIPT>
</ HEAD>
<BODY>
の<divのid = "アプリ" >
<I-テーブルボーダー：列= " columns2 "：データ= " DATA3 " > </ I-テーブル>
</ div>
<スクリプト> のvarアプリ= 新しいヴュー（{
エル：' #app ' 、
データ（ ）{ リターン{
columns2：[
{
幅：60 、
整列：' 中央' 、
レンダリング：（H、params）=>
{
戻り H（' チェックボックス' 、{
小道具：{
値：paramsは.Row $ isEdit ,.
}、
ON：{
' ON-変更'：関数（国は）{
にconsole.log（国は）;
//からテーブルのiViewありません割り当てをクリックするだけで、独自の再建をチェックボックス
のparams .Row。$ isEdit =州
}
}
}）;
}
}、
{
タイトル：' 名前' 、
キー：' 名前'
}、
{
タイトル：' 年齢' 、
キー：' 年齢' 、
レンダリング：（H、のparams）=> {
場合（paramsは。$ isEdit）{.row
戻り（H ' 入力' 、{
{domProps
値：paramsは.row.age
}
に{
入力：機能（イベント）{
paramsは .row.age = イベント.target.value
}
}
}）。
}他 {
リターン H（' DIV '、paramsは.row.age）。
}
}
}、
{
タイトル：' 住所' 、
キー：' アドレス'
}、
{
タイトル：' アクション' 、
キー：' アクション' 、
レンダリング：（H、paramsは）=> {
戻り時間（' ボタン' 、{
小道具：{
タイプ：' テキスト' 、
サイズ：' 小さな'
}、
上：{
クリックしてください：（） => {
場合（のparamsこの.row。$ isEdit）{
]、.handleSave（のparams .row）
} 他{
この .handleEdit（のparams .row）
}
}
}
}、paramsは .row。$ isEdit？' 保存'：' 编辑' ）
}
}
DATA3：[
{
名前：' HA ' 、
年齢：18は、
アドレス：' 上海' 、
$ isEdit：falseに
}、
{
名：' ラ' 、
年齢：24 、
アドレス：' 北京' 、
$ isEdit：falseに
}
]
}
}、
メソッド：{
// select_row（選択、インデックス）{
// はconsole.log（ 'select_row'、選択、インデックス）
// この$セット（this.data3 [インデックス]、 '$ isEdit'、真）
// }、
handleEdit（行）{
にconsole.log（' handleEdit ' 、行）。
この。$のセット（行、' $ isEdit '、真）
}、
handleSave（行）{
console.log（' handleSave '、行）;
この。$のセット（行、' $ isEdit '、偽）
}
}
}）
</ SCRIPT>
</ body>
</ HTML>