vueJS

【Vue.js】「vue-good-table」でページネーション機能付いたテーブルを実装する(CDN版)

この記事は約5分で読めます。

 

今回はVueJSでページネーション機能のついたテーブルを実装したいと思います。

 

Vue.jsのテーブルの種類

 

Vue.jsでよく使われているテーブルは以下の3種類で状況にあったものを選択すると良いかと思われます。

 

  • simple-table
  • data-table
  • vue-good-table

 

関連記事:【VueJS】v-forディレクティブで配列データをインデックスと合わせてテーブルで表示する

 

 

スポンサーリンク
スポンサーリンク

「vue-good-table」でページネーション機能付いたテーブルを実装する

 

導入(CDN版)

 

 

<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>

 

<サンプルコード>

 

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" ></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

<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="items"
theme="black-rhino"
style-class="vgt-table striped"
:pagination-options="{
enabled: true,
mode: 'records',
perPage: 30,
position: 'bottom',
perPageDropdown: [3, 7, 9],
dropdownAllowAll: false,
setCurrentPage: 1,
nextLabel: 'next',
prevLabel: 'prev',
rowsPerPageLabel: 'Rows per page',
ofLabel: 'of',
pageLabel: 'page', // for 'pages' mode
allLabel: 'All',
}">
</vue-good-table >

</div>
</body>

<script>
Vue.use(window.vueGoodTable.default);
const app = new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {

items:[
{
berry:'46億3000万ベリー',
name:'ゴール・D・ロジャー'
},
{
berry:'46億3000万ベリー',
name:'ゴール・D・ロジャー'
},
{
berry:'46億3000万ベリー',
name:'ゴール・D・ロジャー'
},
],

columns: [
{
label: '懸賞金額',
field: 'berry',
type: 'number',
html: true,
},
{
label: 'キャラ名',
field: 'name',
html: true,
}]
},
},
});
</script>
</html>

 

 

その他の引数オプションなどについては下記記事参照:

  • https://xaksis.github.io/vue-good-table/guide/configuration/column-options.html#dateinputformat
  • https://www.kabanoki.net/3230/#table_%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3

 

参照:https://madewithvuejs.com/vue-good-table

 

 

コメント

タイトルとURLをコピーしました