elementUiテーブル編集状態変更部Geqie

< DIV ID = "アプリケーション" > 
   < EL-テーブル：データ= "たtableData" > 
       < EL-テーブル列V-ため= "TableColumnの中（項目、IDX）" ：キー= "IDX" ：プロペラ= "アイテム。小道具" ：ラベル= "item.labelを" > 
          < テンプレートスロットスコープ= "スコープ"  > 
            < divのV-IF = "scope.column.property === 'editTag'" > 
                < p個のV-ショー="スコープ。 row.editTag.isShow」V-テキスト= "scope.row.editTag.value"@click = "編集（ ''、スコープ）" > </ P> 
                < EL-入力V-ショー= "！scope.row.editTag.isShow" V-モデル= "scope.row.editTag.value" @ blur.stop = "編集（$イベント、スコープ）" > </ EL -input > 
            </ divの> 
            < divのV-ELSE > 
                < スパンV-テキスト= "scope.row [item.prop]" > </ スパン> 
            </ DIV > 
            </ テンプレート> 
       </ エル・テーブル> 
  </ DIV >

<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue"> </ SCRIPT> 
<！ -引入样式- > 
<リンクのrel = "スタイルシート"のhref = "https://unpkg.com /element-ui/lib/theme-chalk/index.css "> 
<！ -引入组件库- > 
<スクリプトSRC =" https://unpkg.com/element-ui/lib/index.js "> </ SCRIPT> 
<SCRIPT> 新しいヴュー（{ 
  EL： '#app' 、
  データ（）{ リターン{ 
      たtableData：[ 
      { 
          editTag：{ 
            isShow：真、
            値： 123 
          }、
          テスト： 'デモ' 
        } 
      ]、
      TableColumnの：[ 
          ラベル：

    
 
        { '可编辑项' 、
          小道具： 'editTag' 
        }、
        { 
          ラベル： 'デモ' 、
          プロプ： 'テスト' 
        } 
      ] 
    } 
  }、
  メソッド：{ 
    編集（値、範囲）{ 
      にconsole.log（範囲、値）
      この。$セット（この .tableData [スコープ。$インデックス] .editTag、 'isShow'、！scope.row.editTag.isShow）
    } 
  } 
}）
 </スクリプト>