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

Overview
SelectPage

v-selectpage · circle ci code coverage npm version

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

Financial Contributors on Open Collective JavaScript Style Guide npm download license









Examples and Documentation

Live Examples on CodePen, more examples and documentation please visit below sites

The jQuery version: SelectPage

Features

  • show content by pagination
  • i18n support, provided languages:
    • Chinese
    • English
    • Japanese
    • Arabic
    • Spanish
    • German
    • Romanian
    • French
    • Portuguese-Brazil
    • Polish
    • Dutch
  • 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+

Installation

npm i v-selectpage --save

Include and install plugin in your main.js file.

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

You also can import v-selectpage as a local component

import { SelectPage } from 'v-selectpage'

export default {
  components: {
    'v-selectpage': SelectPage
  }
}

Usage

<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>

Plugin preview

List view for Single selection

single

List view for multiple selection with tags form

multiple

Table view for single selection

table

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

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
Comments
  • Server-side rendering of items overrides the default value

    Server-side rendering of items overrides the default value

    When I use server-side rendering in selectpage, it overrides the default value to the all the items in the first page.

    I created a sandbox for this: https://codesandbox.io/embed/vue-template-43660

    Is this a bug or am I doing something wrong?

    opened by axelthat 10
  • V-model and async messed up selected value

    V-model and async messed up selected value

    Hi, sorry if this topic already discussed but as I see most of them are in Chinese which I don't understand. I have difficulties in selecting the value when I use v-model and aysnc request to server for the data. The values selected are all replaced by the values from the server. If I see the log, everytime I select an option, it requests to server again. Thanks

    <no-ssr placeholder="Loading...">
    	<v-selectpage :data="MY_SERVER_ENDPOINT"
    				  name="currency"
    				  show-field="name"
    				  title="Select Currency"
    				  v-model="asd"
    				  search-field="keyword"
    				  @values="changeData"
    				  :result-format="resultFormat">
    	</v-selectpage>
    </no-ssr>
    
    bug 
    opened by tanyudii 8
  • Selectpage's v-model overrides the default value continued...

    Selectpage's v-model overrides the default value continued...

    Thank you very much for the fix #8 . I think it has helped.

    I do experience the same behavior time to time though. I had to apply a temporary fix to make the component work in my application.

    watch: {
        'models'() {
            if(Object.keys(this.models).length > 0) {
                setTimeout(() => {
                    this.input.model_id = this.settings.properties.model_id
                }, 0)
            }
        }
    }
    

    So, when the data arrives, I simply assign the selected model id to input.model_id because at first this component tries to overrides input.model_id to an empty string. This way with setTimeout(fn, 0), I applied a temporary fix!

    Can you tell me if I'm doing something wrong or not using your component properly?

    bug 
    opened by axelthat 6
  • v-selectpage 打包后的问题

    v-selectpage 打包后的问题

    我的项目是vue+element-ui的项目,我想问下是否依赖element-ui,为了优化性能 #我把element-ui改成cdn链接,并且把main.js里面引入element-ui给注释,在webpack配置里用了externals,但是打包后此组件的input框没有出来,找了好久没有找到原因,请教一下原因。 ![Uploading 02eb38f0505 0e1c0cc0116b49fe91de1583f21e3e5 4589fc616340d86cbaa25563b833fb7

    3f6c3d55de4c966b7e18.png…]()

    opened by jasonlan-design 5
  • 进入页面赋初始化值有问题

    进入页面赋初始化值有问题

    代码如附件,我进入页面给realmId 赋值为1192013224205352962 但是我上面的/live_code/codeliverealm/list 返回的数值是 0. {realmId: "1192011114952785921" realmUrl: (...) } 1: {realmId: "1192013224205352962" realmUrl: (...) } 假设这里有两笔数据 此时我们看realmId的值他就发生了变化,成了realmId:"1192011114952785921,1192013224205352962"

    变成了两个ID了?????这要重新选择下拉框。realmId的值才能变成变成单个,而不是现在有两个。不知道为什么这里会这样?有没有人遇到过这样的问题,如果你进页面不赋值的话,就没问题,

    demo.txt

    opened by Anima-No 5
  • Search not working in combination with modal

    Search not working in combination with modal

    I'm using bootstrap-vue modal https://bootstrap-vue.js.org/docs/components/modal/ together with your plugin and search is not working, I can't even click on search input field, and this is because of d-block class that's used on modal, if I go to inspect of that class and disable and again enable it's css search is working.

    http://prntscr.com/mdp78n

    Code for this look's like this

    
        <template>
        <b-modal :title="trans.get('__JSON__.Create new product group')"
                 id="newGroupModal"
                 ref="newGroupModal"
                 @hidden="onHidden"
                 @shown="onShow"
                 hide-footer>
    
          <b-form @submit.prevent="onSubmit">
    
            <b-form-group :label="trans.get('__JSON__.Name')">
    
              <b-input v-model="form.name"
                       required
                       :placeholder="trans.get('__JSON__.Name')"></b-input>
            </b-form-group>
    
            <b-form-group :label="trans.get('__JSON__.Attributes')">
    
              <v-selectpage :data="attributes"
                            :multiple="true"
                            language="en"
                            ref="attributes"
                            v-model="form.attributes">
              </v-selectpage>
            </b-form-group>
    
            <b-form-group :label="trans.get('__JSON__.Rackbeat number')">
    
              <b-input v-model="form.rackbeat_number"
                       required
                       :placeholder="trans.get('__JSON__.Rackbeat number')"></b-input>
            </b-form-group>
    
            <b-btn type="submit"
                   variant="info">{{ trans.get('__JSON__.Submit') }}
            </b-btn>
          </b-form>
        </b-modal>
        </template>
        <script>
        export default {
            name:    'new-group-modal',
            props:   {
    
                url:        {
    
                    default: '',
                    type:    String,
                },
                attributes: {
    
                    default: [],
                    type:    Array,
                },
            },
            data() {
    
                return {
    
                    form: {
    
                        name:            null,
                        attributes:      '',
                        rackbeat_number: null,
                    },
                };
            },
            methods: {
    
                onSubmit() {
    
                    this.form.attributes = (this.form.attributes !== '') ? this.form.attributes.split( ',' ) : [];
    
                    this.$http.post( this.url, this.form ).then( response => {
    
                        this.form = {
    
                            name:            null,
                            attributes:      '',
                            rackbeat_number: null,
                        };
    
                        this.$refs.attributes.$emit( 'clear' );
                        this.$refs.attributes.pageChange( 1 );
                        this.$eventHub.$emit( 'group-created', response.data.data );
                        this.$refs.newGroupModal.hide();
                        this.$toasted.show( this.trans.get( '__JSON__.Product group created successfully' ), {
    
                            duration: 4000,
                            type:     'success',
                        } );
                    }, response => {
    
                        if ( Array.isArray( this.form.attributes ) ) {
    
                            this.form.attributes = this.form.attributes.join( ',' );
                        }
    
                        let _this = this;
    
                        if ( response.data.errors !== undefined ) {
    
                            Object.values( response.data.errors ).forEach( function ( error ) {
    
                                _this.$toasted.show( error[ 0 ], {
    
                                    duration: 4000,
                                    type:     'error',
                                } );
                            } );
                        } else if ( response.data.message !== undefined ) {
    
                            _this.$toasted.show( response.data.message, {
    
                                duration: 4000,
                                type:     'error',
                            } );
                        }
                    } );
                },
                onHidden() {
    
                    this.$refs.attributes.$emit( 'clear' );
                    this.$refs.attributes.pageChange( 1 );
                },
            },
        };
        </script>
    
    bug 
    opened by kg-bot 5
  • Feature Request: AppendTo property

    Feature Request: AppendTo property

    I am working on a website with RTL interface. And Unfortunately this beautiful component plugin doesn't support RTL languages.

    So I thought providing a feature like appendTo which enables me to append the list to the current parent will help me to override some css properties to make it possible to show the list in a proper way inside an RTL interface.

    suggestion 
    opened by mhelaiwa 5
  • dataload and v-model 有bug

    dataload and v-model 有bug

    remote 方法的 最后一行代码 that.picked = tmpObj.list, 页面全选中了,没有看明白这里要干啥

    我使用 v-model 远程加载, dataload是一个url,

    选中一项之后, 会触发 watch->picked 方法 picked(val) { if (this.message && this.maxSelectLimit && val.length < this.maxSelectLimit) this.message = '' let that = this this.$emit('input', val.map((value) => value[that.keyField]).join(',')) this.$emit('values', this.picked.concat()) },

    通过v-modal ,该组件接受的value改变,触发 watch->value ->this.initSelection 然后走到remote的最后一行, 导致页面全选了

    bug 
    opened by xsawn 5
  • How to change language to English

    How to change language to English

    I have issue configuring the language option to English. import vSelectPage from 'v-selectpage'; Vue.use(vSelectPage, {lang:'en'}) ; It is display the default Chinese

    opened by nobleson 4
  • Selectpage's v-model overrides the default value

    Selectpage's v-model overrides the default value

    I load data from the server and only after the data arrives, I render the v-selectpage component using v-if. The v-model of the component is bind to selected_model. At first, the selected_model is 24. However, the component overrides the selected_model to empty string.

    Is this the intended behavior?

    bug 
    opened by axelthat 4
  • Feature Request: Define a list width

    Feature Request: Define a list width

    Hello,

    I would like to suggest the ability to add a fixed width to the list. Otherwise, when you go through different pages, the container will always keep changing the width and that does not provide a good user experience.

    Thanks

    suggestion 
    opened by IvoPereira 4
  • v-model is not updating the value

    v-model is not updating the value

    Bug

    The v-model didn't work the value would disappear after I click on the option, I tried so many things with no success here is an example https://codesandbox.io/s/heuristic-cookies-q48ez9

    Solution

    After banging my head against the wall I discovered that the data should not be computed value I was doing

    <v-selectpage
      v-model="selectedClientId"
      :data="options.map(el => ({
          name: el.name,
          id: String(el.id)
        }))"
      placeholder=" "
      title=" "
    />
    

    I should do

    <v-selectpage
      v-model="selectedClientId"
      :data="options"
      key-field="id" 
      show-field="name"
      placeholder=" "
      title=" "
    />
    
    opened by quantumass 1
  • z-index problem nested

    z-index problem nested

    hello guys, i had a problem about front side of page. i have modal page and i am bringing Vselectpage on this page but dropdown is opening behind modal. After i zoom in/out the vselectpage become visible but its still under modal. Could you please help me.

    Ekran Alıntısı

    opened by caglarsarikaya 0
Releases(v2.1.4)
  • v2.1.4(Aug 18, 2019)

    Changelog:

    • add Portuguese-Brazil language, the language key is pt_br
    • change css pre-processor program from SCSS to Stylus
    • use Javascript Standard Style to format code
    • upgrade v-dropdown plugin to v2.1.0
    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(Jul 4, 2019)

    Changelog:

    • use render functions to completely rebuild plugin
    • make plugin style more simple, reduce the use of lines
    • optimize some operations and data processing performance
    • fixed duplicate data request in some cases
    • fixed search input not working in some cases
    • add in rtl mode(content align to right), change input direction from right to left
    • add Spanish language, the language key is es
    • add German language, the language key is de
    • add Romanian language, the language key is ro
    • add French language, the language key is fr
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Jan 4, 2019)

    Changelog:

    • rebuild plugin
    • change iconfont name and class name, avoid conflicts with iconfont content in the user environment
    • fixed select current page functional failure in some cases
    • fixed duplicate request issue in server side mode, and v-model variable will auto change when selected some item
    • add rtl option to set drop down container layer and inner content align to the right, to adapt to the needs of some countries/language to the right
    • add disabled option to disabled plugin and removed disabled api
    • add width option to set drop down container layer width, if not set, the drop down container layer width will adaptive by inner content
    • add Arabic language, the language key ar
    • modify the max selected limit item prompt mode
    • the drop down container layer change to plugin v-dropdown
    Source code(tar.gz)
    Source code(zip)
  • v1.0.4(Jul 1, 2018)

A Multiple Files Selector Built With Vue

File Selector Demo link https://flamboyant-hermann-ff1ae0.netlify.app/ Stack Vue 2 file selector can: select multiple files from different folders. op

null 0 Nov 5, 2021
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
✅ Vue 2.x component for selecting image from list

✅ Vue Select Image Vue 2.x component for selecting image from list Demo https://mazipan.github.io/vue-select-image/ Installation # Yarn yarn add vue-s

Irfan Maulana 141 Nov 23, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

vue-dataset ?? HEADS UP! You're currently looking at vue-dataset branch for Vue.js 2. If you're looking for a Vue.js 3 compatible version of vue-datas

Giannis Koutsaftakis 170 Nov 21, 2022
SelectMenu for Vuejs, A simple, easier and highly customized menu solution

v-selectmenu SelectMenu for Vuejs, A simple, easier and highly customized menu solution Examples and Documentation Live Examples on CodePen, more exam

Terry Zeng 185 Nov 18, 2022
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports

v-selectpage · A powerful selection plugin for Vue2, list or table view of pagination, use tags form for multiple selection, i18n and server side reso

Terry Zeng 234 Oct 25, 2022
A pagination table for BootstrapVue with AJAX fetch and server side pagination options.

b-pagination-table A pagination table for BootstrapVue with AJAX fetch and server side pagination options. Internally the component uses b-pagination

X.act Systems 1 Jun 7, 2022
Arne De Smedt 120 Oct 13, 2022
data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.

Please Note! This is the previous version that works with Vue 1.x. The most up-to-date version is the Vuetable-2. If you like it, please star the Vuet

Rati Wannapanop 1.8k Nov 30, 2022
👋 Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Promosis, Inc. 120 Sep 28, 2022
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.

A scalable, full-stack live quiz framework built with VueJS and NodeJS This repository contains a scalable framework for building a real-time quiz app

Ably Labs 45 Oct 27, 2022
A tool to manage i18n resources for VueJS based on Vue-i18n

A tool to manage i18n resources for VueJS based on Vue-i18n

Sina Mirhejazi 2 May 8, 2020
Vue Unit Test Helpers for server-side testing of client-side code

vuenit Vue Unit Test Helpers Vuenit is a testing utility that offers a number of useful methods to make testing Vue applications easier: Easily mount

Jack 36 Dec 8, 2021