Vue.js + Element UI：ELテーブルの行で編集可能なコンテンツ

Question

要素UIで書かれたアプリケーションでは、編集可能なデータグリッドが必要です。
実は、私は次のようなテーブルをしました：

HTML（簡素化）のようにレンダリングされています

<el-table :data="myData" stripe="stripe"> 
    <el-table-column prop="col1" label="Col 1"></el-table-column> 
    <el-table-column prop="col2" label="Col 2"></el-table-column> 
</el-table> 

：だから

<table class="el-table__body"> 
    <td class="el-table_1_column_1"> 
     <div class="cell">Val col 1</div> 
    </td> 
    <td class="el-table_1_column_1"> 
     <div class="cell">Val col 1</div> 
    </td> 
</table> 

、私はに属性contenteditable="true"を追加したいのですがdivはclass="cell"です。
属性をel-table-column要素に追加しようとしましたが、機能しませんでした。

<el-table-column prop="position" label="Pos." contenteditable="true"></el-table-column> 

次に、どのようにしてELテーブルのセルを編集可能にすることができますか？
contenteditableの属性は正しいですか？どうすれば使えますか？

ありがとうございました。

Answer 1

まあ、templateを任意の列に追加して、それぞれがslot-scope="scope"という属性を指定する親scopeにアクセスできるようにしました。このようにして、内部入力を各行の列に限定することができます。

その後、私は次のように私のテーブルを実装しました：上記のコードで

<el-table :data="myData" stripe="stripe"> 
    <el-table-column prop="col1" label="Col 1"> 
     <template slot-scope="scope"> 
      <el-input-number v-model="scope.row.col1" :min="1" :max="99" size="small" controls-position="right" /> 
     </template> 
    </el-table-column> 
    <el-table-column prop="col2" label="Col 2"></el-table-column> 
</el-table> 

、 col1は、属性 v-model="scope.row.col1"を通じて、 col1上のデータソースのテーブル myDataで囲まれています。

明らかに、テンプレートには、el-input、el-input-number、またはカスタムコンポーネントなど、必要なものを挿入できます。

注：上記の例のように、一部の列を編集できるようにすることもできます（2番目の列は編集できません）。