Last-Modified: 2022/05/29

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

PROGRAM

今回は、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をプロパティとして持たせています。

var items = [
  {name: 'えんぴつ', price: 100},
  {name: '万年筆', price: 3000},
  {name: 'シュレッダー', price: 10000},
];
var headers = ['NO','商品名','価格'];
var app = new Vue({
  el: '#app',
  data: function() {
    return {
      items: items,
      headers: headers
    }
  },
})

上記のコードの例では、itemsは商品名と価格のシンプルなデータです。

headersも固定でHTMLに直接埋め込むことはせず、データとして持たせています。

• facebook
• Tweet
• Read Later