开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

TerryZ / v-selectpageJavaScriptMIT

Watch 17 Star 48 Fork 5
Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于 Vue2 的简洁而强大的下拉分页选择器 spread retract

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



Comments ( 5 )

You need to Sign in for post a comment

Help Search