81 lines
1.4 KiB
Vue
81 lines
1.4 KiB
Vue
|
/* eslint react/no-multi-comp:0, no-console:0 */
|
||
|
|
import '../assets/index.less'
|
||
|
|
import TreeSelect from '../index'
|
||
|
|
|
||
|
|
const SHOW_PARENT = TreeSelect.SHOW_PARENT
|
||
|
|
|
||
|
|
const treeData = [{
|
||
|
|
label: 'Node1',
|
||
|
|
value: '0-0',
|
||
|
|
key: '0-0',
|
||
|
|
children: [{
|
||
|
|
label: 'Child Node1',
|
||
|
|
value: '0-0-0',
|
||
|
|
key: '0-0-0',
|
||
|
|
}],
|
||
|
|
}, {
|
||
|
|
label: 'Node2',
|
||
|
|
value: '0-1',
|
||
|
|
key: '0-1',
|
||
|
|
children: [{
|
||
|
|
label: 'Child Node3',
|
||
|
|
value: '0-1-0',
|
||
|
|
key: '0-1-0',
|
||
|
|
}, {
|
||
|
|
label: 'Child Node4',
|
||
|
|
value: '0-1-1',
|
||
|
|
key: '0-1-1',
|
||
|
|
}, {
|
||
|
|
label: 'Child Node5',
|
||
|
|
value: '0-1-2',
|
||
|
|
key: '0-1-2',
|
||
|
|
}],
|
||
|
|
}]
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
value: ['0-0-0'],
|
||
|
|
disabled: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
onChange (value) {
|
||
|
|
console.log('onChange ', value, arguments)
|
||
|
|
this.value = value
|
||
|
|
},
|
||
|
|
switch (checked) {
|
||
|
|
this.disabled = checked
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
render () {
|
||
|
|
const tProps = {
|
||
|
|
props: {
|
||
|
|
treeData,
|
||
|
|
disabled: this.disabled,
|
||
|
|
value: this.value,
|
||
|
|
multiple: true,
|
||
|
|
allowClear: true,
|
||
|
|
treeCheckable: true,
|
||
|
|
showCheckedStrategy: SHOW_PARENT,
|
||
|
|
searchPlaceholder: 'Please select',
|
||
|
|
},
|
||
|
|
on: {
|
||
|
|
change: this.onChange,
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
width: '300px',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<TreeSelect {...tProps} />
|
||
|
|
<input type='checkbox' onChange={e => this.switch(e.target.checked)}/> 禁用
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|