Vue2でVuetifyのv-tabsとag-gridを使ってみた

環境

vue 2.6.11
vuetify 2.6.14
ag-grid-community 29.2.0
ag-grid-vue 29.2.0

コード

plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

const opts = {};

export default new Vuetify(opts);

App.vue

<template>
  <div id="app">
    <v-app id="inspire">
      <v-card>
        <v-tabs>
          <v-tab :value="one">One</v-tab>
          <v-tab :value="two">Two</v-tab>
          <v-tab :value="three">Three</v-tab>
          <v-tab-item :value="one">
            <ag-grid-vue
              style="width: 500px; height: 200px"
              class="ag-theme-alpine"
              :columnDefs="columnDefs"
              :rowData="rowData"
            >
            </ag-grid-vue>
          </v-tab-item>
          <v-tab-item :value="two"> Tab 2 Content </v-tab-item>
          <v-tab-item :value="three"> Tab 3 Content </v-tab-item>
        </v-tabs>
      </v-card>
    </v-app>
  </div>
</template>

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue";
export default {
  props: ["one", "two", "three"],
  name: "App",
  data() {
    return {
      columnDefs: null,
      rowData: null,
    };
  },
  components: {
    AgGridVue,
  },
  beforeMount() {
    this.columnDefs = [
      { field: "make" },
      { field: "model" },
      { field: "price" },
    ];

    this.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxster", price: 72000 },
    ];
  },
};
</script>

<style scoped>
#app {
  background: linear-gradient(45deg, #076bb7, #1e98db);
}

#tab-items {
  background-color: transparent;
}
</style>

main.js

import Vue from "vue";
import App from "./App.vue";
import vuetify from "@/plugins/vuetify"; // path to vuetify export

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(App)
}).$mount("#app");

デモ

リンク

vuetify v2 v-tabs
ag-grid