V-cascade NPM | npm.io

v-cascade

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