Webページでテーブル表示はよく使われますが、デフォルトでの機能の少なさには失望させられます。その結果、使い勝手の悪いテーブルで我慢するか、自分たちで機能を追加しなければなりません。 今回紹介するvue-easytableは名前の通り、Vueで使えるテーブルコンポーネントになります。

vue-easytableの使い方

マウスオーバーで行のハイライト。

表の表示をカスタマイズする例。

ヘッダーを複数行にする例。

列の幅変更。

チェックボックスを使った例。

セルの値を編集。

セルの結合。

チェックボックスによるフィルタリング。

フッターで集計。

ページネーション。

vue-easytableはカスタマイズが多彩にできるので、さまざまな要件をカバーできそうです。Vueプロジェクトで、テーブル表示が必要な時には使っていきたいライブラリでしょう。

vue-easytableはVue用、JavaScript製のオープンソース・ソフトウェア(MIT License)です。

vue table 组件 强大、灵活 支持单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、全选、行展开、条件过滤、footer 汇总、导出excel、汇总 github huangshuwei/vue-easytable: ? Vue table components, support for cell edit,multi-head fixed, multi-column fixed, clumn drag, sort,conditional filter, custom column …(vue table 组件,支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、条件过滤、分页… )