今天给小伙伴们分享2个超赞的Vue分页栏/下拉分页组件VPage。

1、v-page

基于 vue.js 构建的简易独立分页组件。支持i18n多语言、自定义配置、带页数菜单等功能。

安装

$ npm i v-page -S

使用插件

<template>
  <v-page 
    :total-row="totalRow"
    align="center"
    :page-size-menu="true"
    :info="false"
    :border="false"
    @page-change="pageChange"
  >
  </v-page>
</template>
<script>
import { vPage } from 'v-page';

export default {
  components: {
    'v-page': vPage
  },
  data(){
    return {
      totalRow: 100
    }
  },
  methods:{
    pageChange(pInfo){
      console.log(pInfo); //{pageNumber: 1, pageSize: 10}
      axios({
        ...
      }).then(resp => {
        this.totalRow = resp.totalRow;
      });
    }
  }
}
</script>

# 文档示例
https://terryz.gitee.io/vue/#/page/demo

# 仓库地址
https://github.com/terryz/v-page

2、v-selectpage

基于 vue2.x 简洁强大的下拉分页选择器组件。使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持。

功能特性

• 分页展示数据
• i18n 支持, 提供了 中文、英文、日文 等语言
• 服务端数据源支持
• 使用标签模式进行项目多选
• 可使用键盘进行快速导航
• 提供快速搜索，进行快速数据定位
• 提供列表视图和表格视图进行展示数据
• 可自定义行显示方式

安装

$ npm i v-selectpage -S

使用插件

<template>
  <v-selectpage :data="list" key-field="id" show-field="name" :multiple="true"></v-selectpage>
</template>
<script>
import { SelectPage } from 'v-selectpage'

export default {
  components: {
    'v-selectpage': SelectPage
  },
  data(){
    return {
      list: [
        { id:1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
        { id:2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
        { ... }
      ]
    }
  },
}
</script>

so good，最后附上文档及项目地址

# 文档示例
https://terryz.gitee.io/vue/#/selectpage/demo

# 仓库地址
https://github.com/terryz/v-selectpage

ok，就分享到这里。希望对大家有所帮助，如果觉得不错，可以多支持一下哈。