前端 菜单栏分页显示
网页 (v-page)
A simple pagination bar, including length Menu, i18n support, based on Vue2.x.
一个简单的分页栏,包括基于Vue2.x的长度菜单,i18n支持。
安装 (Install)
# install dependencies
npm install v-page --save
Include plugin in your main.js
file.
在main.js
文件中包含插件。
import Vue from 'vue'
import vPage from 'v-page';
...
Vue.use(vPage);
在您的组件上部署 (Deploy on your component)
template code
模板代码
<template>
<!-- v-bind 'setting' data to config page bar -->
<!-- bind event 'page-change' to receive page info change -->
<v-page :setting="pageSet" @page-change="pageChange"></v-page>
</template>
script code
脚本代码
export default {
name: 'myComponent',
data(){
return {
pageSet: {
totalRow: 0,//required option
language: 'en',//default: 'cn'
pageSizeMenu: [20,100]//default: [10, 20, 50, 100]
}
}
},
methods:{
//receive page info change callback
pageChange(pInfo){
console.log(pInfo);//{pageNumber: 1, pageSize: 10}
}
}
};
翻译自: https://vuejsexamples.com/a-simple-pagination-bar-including-length-menu/
前端 菜单栏分页显示