Vue.js 3を使ってTableをカスタマイズしていく(基本)

2022年4月4日

はじめに

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。

今回は、ベースとなるテーブルをVue.jで構築します。
単にHTMLを記述するのではなく、列と行をそれぞれデータとしてVueに持たせてDOMにレンダリングさせます。

 

環境

この記事は、以下の管理人の検証環境にて記事にしています。

vue.js 3.2.26

 

完成ソースコード

 

HTML

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="'tr'+index">
        <td v-for="(label, key) in header" :key="'td-'+key+index">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

 

CDN

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

 

Javascript

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'[email protected]'},
        {no:2, name:'Naoki', email:'[email protected]'},
        {no:3, name:'Yuki', email:'[email protected]'},
        {no:4, name:'Aoi', email:'[email protected]'},
        {no:5, name:'Hnako', email:'[email protected]'},
        {no:6, name:'Momo', email:'[email protected]'},
        {no:7, name:'Taro', email:'[email protected]'}, 
        {no:8, name:'Shiori', email:'[email protected]'},
        {no:9, name:'Jiro', email:'[email protected]'},
        {no:10, name:'Sigeru', email:'[email protected]'},
      ]
    }
  }
}
Vue.createApp(App).mount('#app');

 

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

サンプルはBootstrapを使用しています。

See the Pen
Vue.jsを使ってTableをカスタマイズしていく(基本編)
by カバの樹 (@kabanoki)
on CodePen.0

 

解説

 

step
1
完成形イメージのHTMLを構築する

最終的に形となっていて欲しいHTMLを構築します。

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>EMail</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Daiki</td>
      <td>[email protected]</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Naoki</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Yuki</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Aoi</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>5</td>
     <td>Hnako</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>6</td>
     <td>Momo</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>7</td>
     <td>Taro</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>8</td>
     <td>Shiori</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>9</td>
     <td>Jiro</td>
     <td>[email protected]</td>
   </tr>
   <tr>
     <td>10</td>
     <td>Sigeru</td>
     <td>[email protected]</td>
   </tr>
  </tbody>
</table>

 

step
2
Vue.jsを使って見出しをDOM出力

Step1で作ったHTMLの見出しをVue.jsを使ってDOM出力していきます。

まずCDNでVue.jsを呼び出します。

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

 

見出しとなるデータをObjectで、Vueのdataに持たせます。

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'}
    }
  }
}

 

Step1のHTMLを下記のように書き換えます。

<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}}
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Daiki</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Naoki</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Yuki</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

 

最後にVueをマウントしてDOM出力します。

Vue.createApp(App).mount('#app');

 

step
3
Vue.jsを使ってデータ行をDOM出力

テーブルのデータ行を、Vueのdataに持たせて出力します。

ココがポイント

見出しのkeyとデータ行のkeyを合わせると、動的にデータを出力することができます。

 

Step2で作成したAppオブジェクトのdataに行のデータitemsを設定します。

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'[email protected]'},
        {no:2, name:'Naoki', email:'[email protected]'},
        {no:3, name:'Yuki', email:'[email protected]'},
        {no:4, name:'Aoi', email:'[email protected]'},
        {no:5, name:'Hnako', email:'[email protected]'},
        {no:6, name:'Momo', email:'[email protected]'},
        {no:7, name:'Taro', email:'[email protected]'}, 
        {no:8, name:'Shiori', email:'[email protected]'},
        {no:9, name:'Jiro', email:'[email protected]'},
        {no:10, name:'Sigeru', email:'[email protected]'},
      ]
    }
  }
}

 

Step2のHTMLを下記のように書き換えます。

<div id="app">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="(label, key) in header" :key="key">{{label}} 
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="'tr'+item[no]">
        <td v-for="(label, key) in header" :key="'td'+key+item[no]">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

 

これで基本となるテーブルは完成となります。

 

さいごに

今後、この記事の内容をベースに色々カスタムしていく記事を書こうと思っています。

興味がある方は、下記のまとめよりご覧ください。

まとめVue.js 3を使ってTableをカスタマイズしていく(まとめ)

Vue.js 3系を使ってテーブルを色々カスタマイズして行こうと思います。

続きを見る

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-