Home

Awesome

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

NameTypeDefaultDescription
v-modelBooleanfalseCascade display and hide
dataArray[]Cascade list data, Must use a fixed format.{'key':key,'label','children':[]},children is a option key
titleArray[]Cascade top title
addClassString''Add an extra outer class to the cascade
filterableBooleanfalseenable the cascade's local search,if it is true,there are a input of search in cascade
remoteBooleanfalseenable the cascade's remote search,if this item is true, you need to add a remoteMethod to the cascade to get the remote data
remoteMethodFunctionnoneA function to get remote data,you need format the reponse data to accepted format of the cascade (See data prop for details)
loadingBooleanfalseenable the loader display or hide
scrollableBooleanfalsewhether the document page can be scrolled
placeholderStringPlease enter...default placeholder for the search box
noFoundStrStringNothing found, click Button to use custom contentNo search returns a copy when the result is empty
spLevelNumber9999Maximum number of levels selected

Events

NameDescriptionreturn
successCallback function after successful cascade selectionJson of Selected value
cancelCallback function after cancel cascade selectionnone
on-query-changeCallback function after search query changedquery value

Todo

Contribute

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

Feature requests and PRs are welcome.

LICENSE

MIT Licensed. See LICENSE.