【Vue.js】vue-good-tableで縦線を消して横線だけのテーブルを作りたい！！

タイトルの通りです。

Vue-good-tableで作成するテーブルの縦線を無くし、横線だけのテーブルを作る方法です。

イメージはこんな感じです↓

Vue-good-tableで縦線を消すには”style-class”を追加するだけ！

実装方法は非常に簡単でした。

htmlファイル内でvue.jsを書いているところに“style-class=”vgt-table”を追加するだけ！

<sample.html>

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.16.3/dist/vue-good-table.css" rel='stylesheet'>
    <script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.16.3/dist/vue-good-table.js"></script>
</head>

<body>
    <div id="app">
        <vue-good-table :columns="columns" :rows="rows" style-class="vgt-table"/>
    </div>

    <script src="vgt.js"></script>
</body>

</html>

before

after

見た目がスッキリしましたね！

他にもストライプ等のスタイルを選べるので、詳しくは公式を参照ください。

vue.jsを使って画面を作成する際にテーブルが必要なら、

手軽に綺麗で高機能なテーブルを作れるvue-good-tableが欠かせませんね。

【Vue.js】vue-good-tableでrowsに関数の結果を入れる

vue.jsを使った画面でテーブルを作成する際、vue-good-tableという非常に便利なモジュールがありますが、データに関数の結果を入れようとして少し躓いたので、記事に残しておきました。vue-good-ta...