Awesome
v-cascade
A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档
Introduction
Screenshot
basic-selector
remote-selector
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.