You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.7 KiB
89 lines
1.7 KiB
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
import '../assets/index.less';
|
|
import TreeSelect from '../src/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 {
|
|
mixins: [BaseMixin],
|
|
data: () => ({
|
|
value: ['0-0-0'],
|
|
disabled: false,
|
|
}),
|
|
methods: {
|
|
onChange(value) {
|
|
console.log('onChange ', value, arguments);
|
|
this.setState({ value });
|
|
},
|
|
switch(checked) {
|
|
this.setState({ 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',
|
|
__propsSymbol__: Symbol(),
|
|
},
|
|
on: {
|
|
change: this.onChange,
|
|
},
|
|
style: {
|
|
width: '300px',
|
|
},
|
|
};
|
|
return (
|
|
<div>
|
|
<TreeSelect {...tProps} />
|
|
<input type="checkbox" onChange={e => this.switch(e.target.checked)} /> 禁用
|
|
</div>
|
|
);
|
|
},
|
|
};
|