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

はじめに

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

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

環境

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

完成ソースコード

<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="item.no">
        <td v-for="(label, key) in header" :key="'td'+key+item.no">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'daiki@hoge.net'},
        {no:2, name:'Naoki', email:'naoki@hoge.net'},
        {no:3, name:'Yuki', email:'yuki@hoge.net'},
        {no:4, name:'Aoi', email:'aoi@hoge.net'},
        {no:5, name:'Hnako', email:'hanako@hoge.net'},
        {no:6, name:'Momo', email:'momo@hoge.net'},
        {no:7, name:'Taro', email:'taro@hoge.net'}, 
        {no:8, name:'Shiori', email:'siori@hoge.net'},
        {no:9, name:'Jiro', email:'jiro@hoge.net'},
        {no:10, name:'Sigeru', email:'sigeru@hoge.net'},
      ]
    }
  }
}
Vue.createApp(App).mount('#app');

サンプル

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

解説

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>daiki@hoge.net</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Naoki</td>
     <td>naoki@hoge.net</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Yuki</td>
     <td>yuki@hoge.net</td>
   </tr>
   <tr>
     <td>4</td>
     <td>Aoi</td>
     <td>aoi@hoge.net</td>
   </tr>
   <tr>
     <td>5</td>
     <td>Hnako</td>
     <td>hanako@hoge.net</td>
   </tr>
   <tr>
     <td>6</td>
     <td>Momo</td>
     <td>momo@hoge.net</td>
   </tr>
   <tr>
     <td>7</td>
     <td>Taro</td>
     <td>taro@hoge.net</td>
   </tr>
   <tr>
     <td>8</td>
     <td>Shiori</td>
     <td>siori@hoge.net</td>
   </tr>
   <tr>
     <td>9</td>
     <td>Jiro</td>
     <td>jiro@hoge.net</td>
   </tr>
   <tr>
     <td>10</td>
     <td>Sigeru</td>
     <td>sigeru@hoge.net</td>
   </tr>
  </tbody>
</table>

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

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

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

<script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>

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

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

Step１の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>daiki@hoge.net</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Naoki</td>
        <td>naoki@hoge.net</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Yuki</td>
        <td>yuki@hoge.net</td>
      </tr>
    </tbody>
  </table>
</div>

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

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

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

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

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

const App = {
  data() {
    return {
      header: {no:'No', name:'Name', email:'E-Mail'},
      items:[
        {no:1, name:'Daiki', email:'daiki@hoge.net'},
        {no:2, name:'Naoki', email:'naoki@hoge.net'},
        {no:3, name:'Yuki', email:'yuki@hoge.net'},
        {no:4, name:'Aoi', email:'aoi@hoge.net'},
        {no:5, name:'Hnako', email:'hanako@hoge.net'},
        {no:6, name:'Momo', email:'momo@hoge.net'},
        {no:7, name:'Taro', email:'taro@hoge.net'}, 
        {no:8, name:'Shiori', email:'siori@hoge.net'},
        {no:9, name:'Jiro', email:'jiro@hoge.net'},
        {no:10, name:'Sigeru', email:'sigeru@hoge.net'},
      ]
    }
  }
}

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="item.no">
        <td v-for="(label, key) in header" :key="'td'+key+item.no">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
</div>

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

さいごに

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

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