Vue.jsでのテーブルの実装方法【現役エンジニアが解説】

今回は、Vue.jsでのテーブルの実装方法について、簡単に解説していきます。

HTML

Vue.jsではテーブルをレンダリングできます。

描画はv-forを使うことで、リアクティブにできます。

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" v-bind:key="index">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" v-bind:key="index">
        <td>{{index + 1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
      </tr>
    </tbody>
  </table>
</div>

上記のコードでは、headersとitemsのデータをテーブルに描画しています。

CSS

CSSはここでは表示を整える程度です。

今回なくても動作には何の問題もありません。

table {
  border: solid 1px #000 ;
  border-collapse:collapse;
}
th {
  border: solid 1px #000 ;
}
td {
  border: solid 1px #000 ;
}

上記の例では、テーブルに1pxの罫線を引いています。

Vue.js

Vue.jsではitemsとheadersをプロパティとして持たせています。