v-selectpage

A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports

Usage no npm install needed!

<script type="module">
  import vSelectpage from 'https://cdn.skypack.dev/v-selectpage';
</script>

README



v-selectpage


v-selectpage

A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports

Demos and Documents

Explorer on

The jQuery version: SelectPage

Features

  • show content by pagination
  • i18n support, provide Chinese, English, Japanese languages
  • server side data source support
  • tag form for multiple selection
  • keyboard to quick navigate
  • quick search for autocomplete
  • list view and table view to show content
  • custom row content render

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE9, IE10, IE11, Edge Firefox 18+ Chrome 49+ Safari 10+ Opera 36+

Plugin preview

single selection show by list view

single

multiple selection with tags show by list view

multiple

single selection show by table view

table

Installation

npm i v-selectpage --save

Include and install plugin in your main.js file.

import Vue from 'vue'
import vSelectPage from 'v-selectpage';
Vue.use(vSelectPage, { global config options });

Deploy on your component

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

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

Dependenics

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
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution