Vue.jsを使って、テーブルタグからデータ明細を見せるようなWebアプリケーションをサクッと実装。
ダッシュボード的なアプリなどでデータを見せる際に便利ではないでしょうか。
タイトルにあるライブラリを使う際の注意点やノウハウを展開します。
<div ref="table">
<v-client-table :columns="vueTables.columns" :data="vueTables.data" :options="vueTables.options"
@sorted="updateScrollBooster" @pagination="updateScrollBooster"
@limit="updateScrollBooster">
</v-client-table>
script
// 一部、ここに書いてない定数があるのでそのままは使えない。注意
new Vue({
el: '#app',
data: {
// vue-tables-2用定義
vueTables: {
columns: [
'acceptDate',
'validStartDate',
'validEndDate',
'productName',
data: [],
options: {
headings: VUE_TABLES_HEADINGS,
sortable: [
'acceptDate', 'validStartDate', 'validEndDate', 'productName',
orderBy: { column: 'acceptDate' },
skin: 'table-striped table-bordered table-hover table-sm',
texts: VUE_TABLES_TEXTS,
perPage: 50,
perPageValues: [50, 100, 500, 1000],
sortIcon: VUE_TABLES_SORTICON
scrollBoosterNormal: null,
mounted() {
// ScrollBoosterを設定
let viewport = this.$refs.table.querySelector('.table-responsive');
let content = viewport.querySelector('table');
this.scrollBooster = setScrollBooster(viewport, content);
methods: {
updateScrollBooster() {
// ScrollBoosterのviewport幅を更新する(検索結果に合わせて)
this.$nextTick(function () {
// nextTickでDOMの幅が確定した状態でupdateMetricsを実行する
this.scrollBooster.updateMetrics();
Vue-Tables2で横スクロールを有効にするために、実際にはCSS定義も行ってある(overflow-x: scroll)