a lovely component of cascade selector with vue.js

Overview

v-cascade

npm npm npm

A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档

Introduction

Demo

Screenshot

basic-selector

Screenshot-basic

remote-selector

Screenshot-remote

Install

// npm
$ npm install v-cascade --save

// or

// cdn
<script src="https://unpkg.com/v-cascade/lib/v-cascade.min.js"></script>

Usage

<v-cascade
  v-model="locationModal"
  :data="location"
  :title="['省份','城市','区县']"
  addClass="cascade-location"
  @success="locationSuccess"
  @cancel="cancel"
></v-cascade>
// ES6
import vCascade from 'v-cascade'

Vue.use(vCascade)

Props

Name Type Default Description
v-model Boolean false Cascade display and hide
data Array [] Cascade list data, Must use a fixed format.{'key':key,'label','children':[]},children is a option key
title Array [] Cascade top title
addClass String '' Add an extra outer class to the cascade
filterable Boolean false enable the cascade's local search,if it is true,there are a input of search in cascade
remote Boolean false enable the cascade's remote search,if this item is true, you need to add a remoteMethod to the cascade to get the remote data
remoteMethod Function none A function to get remote data,you need format the reponse data to accepted format of the cascade (See data prop for details)
loading Boolean false enable the loader display or hide
scrollable Boolean false whether the document page can be scrolled
placeholder String Please enter... default placeholder for the search box
noFoundStr String Nothing found, click Button to use custom content No search returns a copy when the result is empty
spLevel Number 9999 Maximum number of levels selected

Events

Name Description return
success Callback function after successful cascade selection Json of Selected value
cancel Callback function after cancel cascade selection none
on-query-change Callback function after search query changed query value

Todo

  • Transitions, Animations
  • Multiple
  • Globle event
  • ...

Contribute

Feel free to open an issue if you find a bug.

Feature requests and PRs are welcome.

LICENSE

MIT Licensed. See LICENSE.

You might also like...
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

A component for Vue.js to select double-sided data.
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Vanilla Vue.js component that mimics Selectize behavior (no jquery dependency)

vue-selectize A Vanilla Vue.js component that mimics the selectize.js behavior https://vue-selectize.vilanculo.me Installation yarn add selectize @isn

Vue 3 multiselect component with single select, multiselect and tagging options.
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

Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

A vue keyboard MultiSelect component.

vue-keyboard-multiselect A project for building a keyboard-supported MultiSelect component based on Vue.js. Build Setup # install dependencies npm i v

Lightweight and mighty select component like Chosen and Select 2 done the Vue way.
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 (

Comments
  • feat: Add new props defaultItem

    feat: Add new props defaultItem

    Thanks for making this great component! This provides nice usability on mobile especially, much better than Element UI.

    Now I think that having default item option would be great, as I added in this PR :) Hopefully this can get merged.

    opened by mirucon 0
  • example

    example

    hello, i am very interested in your component, its looks really promising but i have some questions

    • how to avoid self closing after click in last level
    • stop at specific level, perhaps if :title ['A', 'B', 'C'] - dont go further, also when C has childs
    • can we jump to a specific level
    • can we get the filtering over all levels
    • there are some fixed chinese placeholder, messages

    thank you very much marc

    opened by marcdakar 4
A Vue 3 headless file selector component

vue3-file-selector A Vue 3 headless File Selector component. How to use This library includes a few headless components for a drag and drop supported

cyon GmbH 21 Jul 28, 2022
A simple vue drag selector component

Vue-Drag-Selector 基于Vue.js的框选组件 示例(Demo) View Demo 安装(install) npm i vue-drag-selector 引入(import) // main.js import VueDragSelector from "vue-drag-se

XuCat 40 Nov 1, 2022
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
A Simple Twemoji Selector.

SI-GRENOBLE INSTALL npm install si-grenoble SETUP SI-GRENOBLE は TailwindCSS のスタイルを利用していますが、スタイルを提供はしていません。 利用する場合は TailwindCSS をインストールし、 tailwind.conf

null 8 Jun 10, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 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
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 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
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Nov 26, 2022