本周六「上海源创会」,与一线大牛一起聊聊:PHP、Flink、k8s、微服务架构,点击立刻报名!
指数
0
Watch 19 Star 50 Fork 6

TerryZ / v-selectpageJavaScriptMIT

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
基于 Vue2 的简洁而强大的下拉分页选择器 展开 收起

https://terryz.gitee.io/vue/#/selectpage

克隆/下载
Loading...
README.md



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:'克里夫兰骑士'},
                {...}
            ]
        }
    }
};



点评 ( 5 )

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

搜索帮助

14_float_left_people 14_float_left_close