今回は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
コメント