89 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
			
		
		
	
	
			89 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
| /* 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>
 | |
|     );
 | |
|   },
 | |
| };
 |