Watch Star Fork

TerryZ / v-selectpageJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 Vue2 的简洁而强大的下拉分页选择器 https://terryz.gitee.io/vue/#/selectpage
Loading...
README.md 4.56 KB



v-selectpage


v-selectpage

基于 Vue2 强大的选择器, 可分页的列表或表格展现形式,
使用标签形式的多选模式, 国际化 i18n 和服务端数据源支持






文档、Demo

请浏览

jQuery 版本: SelectPage

If you think this project is helpful, please star it.



功能特点

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



Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports



插件预览

列表视图单选模式

single

列表视图使用标签的多选模式

multiple

表格视图

table



安装

npm install v-selectpage --save

在项目入口 main.js 中引入

import Vue from 'vue'
import vSelectPage from 'v-selectpage';
Vue.use(vSelectPage);

应用在页面上

template

<template>
    <v-selectpage :data="list" key-field="id" show-field="name" class="form-control"></v-selectpage>
</template>

script

export default {
    data(){
        return {
            list: [
                {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
                {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
                {...}
            ]
        }
    }
};



项目点评 ( 4 )

你可以在登录后,发表评论

搜索帮助