一身上の都合により

プログラミングとかの話

Vue のテーブルライブラリ(2)

前回、vue-good-table に不満を覚えて他ライブラリへの移行を検討したが、
結局vue-good-table で編集機能を実装できた。

実装方法を書いておく。

Customizations | vue-good-table
公式ドキュメントのCustomizations を参考にした。

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-row" slot-scope="props">
      <span v-if="props.column.field == 'id'">
          <input class="custom-select" type="text"  v-model="rows[props.row.idx].id">
      </span>
  </template>
</vue-good-table>

rows のは辞書型配列で、各辞書型にはidx というindex プロパティを持たせてある。
これは適当にmap メソッドを使えばすぐ用意できると思う。

これならcolumn のfield が "id" のときに、データ rows の "id" の値を v-model で扱える。