This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Commonly used in the work of the drop-down component and linkage selection component can not meet the requirements, based on their own IView UI library package a.

Results show

Directions for use

Select Attributes

parameter instructions type An optional value The default value
data Data used to render the page (in the same format as element’s cascading selector) array – There is no
value Data items are selected by default array – There is no
expand-trigger The expansion of the secondary menu string click / hover click
separator Option separator string – Rail ‘-‘
value-key Specifies that the value of the option is an attribute value of the option object string – value
label-key Specifies the option label as an attribute value of the option object string – label
children-key Specifies that the child of the option is an attribute value of the option object string – children
clearable Whether the clear option is supported boolean – false
placeholder A placeholder string – Please select a
popper-class The class name of the drop-down box string – ‘ ‘
onlyShowChecked Whether only the selected ones are displayed boolean – false
isShowIndeterminate Whether to display half selection boolean – true
selectChildren Whether to allow parent-child linkage boolean – true
maxCount Maximum number of selections This property cannot be used to select all number – There is no
transfer Do YOU want to display the list under the body? boolean – false
placement The location where the drop-down menu appears string Top, top-start, top-end, bottom, bottom-start, bottom-end, leftleft-start, left-end, right, right-start, right-end bottom
labelLv Label Indicates the level of display string All all/last last all
sync Asynchronously loading child elements Asynchronously passing data syncCallBack is required when sync is enabled boolean – false
syncCallBack The request data callback sync is enabled function – –
maxRequest The maximum request level 0 is unrestricted number – 0
notSelectNext Set all at the upper level. Do not select data at the next level. False Do not select data at the next level boolean @todo false
checkKey Each level of data field can be selected without filling in the default display selection box. Tips: Checkboxes and full checkboxes are displayed only if all are set to True at the current level. string – showCheck
echoLabel Whether to echo labels array – []

Select Events

The name of the event instructions The callback parameter
change Triggered when the selected value changes The current selected value
visible-change Trigger when a drop-down box appears/hides True if present, false if hidden
remove-tag Triggered when a tag is removed The removed tag value
clear Triggered when the user clicks the Clear button in the clear mode –
getLables Gets the corresponding labels []

Use the sample

The sample

<template> <div id="app"> <! -- <router-view /> --> <IvuMutil style="width: 200px;" v-model="list" :echoLabel="labels" :data="data2" sync @getLables="getLables" :syncCallBack="syncCallBack"></IvuMutil> </div> </template> <script> import IvuMutil from '@/components/ivu-multi-cascader' export default { name: 'App', data() {return {list: ['zhinan-shejiyuanze', 'zhinan-daohang'], Labels: [' guide-design ', 'guide-navigation '], data: [{showCheck: true, value: 'zhinan', label: 'guide ', children: [{showCheck: true, value: 'shejiyuanze', label:' guide ', children: [{showCheck: true, value: 'shejiyuanze', label: Children: [{value: 'yizhi', label: 'consistent'}, {value: 'fankui', label: 'feedback'}, {value: 'xiaolv', label: 'daohang', {value: 'kekong', label: 'controllable'}]}, {value: 'daohang', label: 'navigation ', children: [{value: 'Cexiangdaohang ', label:' Lateral navigation ', {value: 'dingbudaohang', label: 'top navigation'}]}]}, {value: 'ziyuan', label: 'ziyuan'} Children: [{value: 'axure', label: 'axure Components'}, {value: 'sketch', label: 'Sketch Templates'}, {value: 'jiaohu', label: 'Component interactive documentation'}]}], data2: [{showCheck: true, value: 'zhinan', label: }, {value: 'ziyuan', label: 'resource'}]}, components: {IvuMutil}, methods: { getLables(lbs) { this.labels = lbs }, syncCallBack(data) { return new Promise((resolve, reject) => { setTimeout(() => { let list = [] if (data.value === 'zhinan') { list = [ { value: 'shejiyuanze', label: }, {value: 'daohang', label: 'navigation'}]} if (data.value === 'ziyuan') {list = [{value: 'a', label: 'A' }, { value: 'b', label: 'B' } ] } resolve(list) }, 1000) }) } } } </script>Copy the code

Download and install

npm install ivu-multi-cascader --save
Copy the code

Source warehouse

Github.com/yangyfeng/i…