[Vue] Vuescrollをtableで使用する

mayatasomayataso

Vueのライブラリに、Vuescrollというものがある。

https://vuescrolljs.yvescoding.org/

これを使うとスクロールバーのカスタマイズが簡単にできる。
マウスオーバー時のみバーを表示したりとか、結構いろいろカスタマイズできて便利だが、tableで使用する場合は少し注意が必要。

<table>
  <tr class="table-header">
    <th>A</th>
    <th>B</th>
  </tr>
  <vur-scroll>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </vur-scroll>
</table>

こんな感じでtableの中身をスクロールさせようとすると、上手くいかない。直下の要素が複数あると上手く機能しないっぽい。

対策としては、ちゃんとtheadとtbodyを付けてあげよう。ちなみにVuescrollを使わない場合のテーブルコンテンツスクロールもこれで対応できる。

<table>
  <vur-scroll>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </vur-scroll>
</table>