Help us understand the problem. What is going on with this article?

Vue.js向けの高機能・高性能なテーブルコンポーネントvxe-tableを紹介したい

何に関する記事か?

:white_check_mark: vxe-table というVue.js向けのテーブルUIコンポーネントを紹介する記事です。
かなり高機能・高性能なライブラリなのですが、中国発ということもあり日本語の情報が見当たらなかったので記事にしてみました。

:warning: この記事ではコンポーネントの提供する機能のほんの一部しか紹介していません。より詳細な情報は以下のリンクから参照してください。

:link: Link

  • GitHub - vxe-table
    • コンポーネントの概要やインストール手順、サンプルコードなど
  • vxe-table 公式ガイド(英語・中国語)
    • コンポーネントの提供する機能・サンプルコードやAPIリファレンスなど
    • かなりたくさんの機能が提供されているので、是非一度チェックしてみてください!

誰にとってオススメか?

Element, Vuetify などのコンポーネントライブラリを使っていて、テーブル(グリッド)コンポーネントで実現に手間のかかる機能がある場合や性能的な問題を抱えている場合にオススメです。
とくにテーブルコンポーネントに多様な機能・性能を求められる業務系のアプリなどで良さを発揮しやすいと思っています。

以下では、vxe-table の基本的な書き方を押さえた後、
Element / Vuetify との簡単な性能比較を行うサンプルを作成しています。

vxe-table の基本的な書き方

install

以下のリンクに沿って、CDNかnpmでインストールしましょう。
https://github.com/x-extends/vxe-table/blob/HEAD/README.en.md#installing

日本語化にも対応されています。
https://x-extends.github.io/vxe-table/#/table/start/i18n

シンプルなテーブルの例

まずは GitHub - Example のシンプルな例から見てみます。
※コメントを追記しています。

<template>
  <div>
    <!-- vxe-tableコンポーネントにtableDataをバインドする -->
    <vxe-table :data="tableData">
      <!-- 各カラムをvxe-table-columnで定義する -->
      <!-- type="seq"で行番号を表示する -->
      <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
      <!-- tableDataのkey名をfieldとして指定する -->
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // vxe-tableにバインドされるデータ
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

これまでに他のテーブルコンポーネントを利用したことのある方はすぐに理解できると思います。
実装ではこれを基本形として、<vxe-table><vxe-table-column>タグにPropsを追加していく形になります。

JSからのテーブル操作

JSからテーブルを操作したい場合は vxe-table タグに ref を付けて、this.$refs から取得したテーブルコンポーネントからAPIを利用します。
例えば、2行目のチェックボックスをtoggleさせたい場合は以下のようなソースになります。

<template>
  <div>
    <button @click="toggleSecondRow">2行目のチェックボックスを操作</button>

    <!-- テーブルにrefで名前を付ける -->
    <vxe-table ref="myTable" :data="tableData">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  },

  methods: {
    toggleSecondRow() {
      // vxe-tableのAPIを利用してチェックボックスの2行目をtoggleさせる
      this.$refs.myTable.toggleCheckboxRow(this.tableData[1]);
    }
  }
}
</script>

:tada: これで vxe-table のガイドを読むのに最低限必要な準備は完了です。
後は vxe-table 公式ガイド を読めば実現したい機能を実装していけるはずです!

vxe-table と他のコンポーネントライブラリとの性能比較

vxe-table では virtual scroller が標準で組み込まれているため、大量データでも高い性能を発揮します。
個人的にこのライブラリで一番感動したポイントなので、大量データのテーブル実装を行ってみて、簡易的な性能比較をしてみたいと思います。

具体的には、Element / Vuetify / vxe-table でそれぞれ10列×1000行のテーブルデータと行選択できるチェックボックスを実装します。

1. Element

https://jsfiddle.net/Nag729/f3j2txnm/20/

スクロールからすでに遅く、チェックボックスの選択はスムーズとは言い難いですね:cry:
ソートも同様に時間がかかっています。

2. Vuetify

https://jsfiddle.net/Nag729/u5jgqvr4/2/

Element と比較すると優秀で、スクロールにストレスはありません
ただ、全データの選択やカラムソートになると結構待たされます:expressionless:

3. vxe-table

https://jsfiddle.net/Nag729/o13xmpn0/6/

スクロール・チェックボックス選択・ソートの全てがスムーズに動いています:blush:
自前でライブラリや設定を追加しなくてもこれだけの大量データに対応してくれるのは嬉しいですね!

終わりに

以上、vxe-table の紹介でした。
現状でもかなりの機能が用意されている上に、これから先もバージョンアップが予定されているようなので、是非一度使ってみてください。

Nag729
Vue.jsをメインに書いてるひよこエンジニア3年目🐤
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした