@alicd/crui-tree-select-field/examples/app.jsx

树形下拉框

import ReactDOM from 'react-dom';
import { TreeSelect } from '@alicd/next';

import TreeSelectField from '../src/index';

import '../assets/index.scss';
import './app.scss';

const mountNode = document.getElementById('root');

const treeData = [{
  label: '服装',
  value: '1',
  key: '1',
  selectable: false,
  children: [{
      label: '男装',
      value: '2',
      key: '2',
      children: [{
          label: '外套',
          value: '4',
          key: '4',
          disableCheckbox: true
      }, {
          label: '夹克',
          value: '5',
          key: '5',
          disabled: true
      }]
  }, {
      label: '女装',
      value: '3',
      key: '3',
      children: [{
          label: '裙子',
          value: '6',
          key: '6'
      }]
  }]
}];
class Demo extends React.Component {
  handleChange(value, data) {
    console.log(value, data);
  }

  render() {
    return (
      <div>
        <TreeSelect inputStyle={{width: 200}} autoWidth={false} treeDefaultExpandAll
          showSearch dataSource={treeData}
          onChange={this.handleChange.bind(this)} hasClear style={{ width: 200 }}
        />
        <TreeSelectField inputStyle={{width: 200}} compact autoWidth={false} treeDefaultExpandAll
          onChange={this.handleChange.bind(this)} hasClear style={{ width: 200 }}
          multiple>
          <TreeSelect.Node key="1" value="1" label="服装">
            <TreeSelect.Node key="2" value="2" label="男装">
              <TreeSelect.Node key="4" value="4" label="外套" />
              <TreeSelect.Node key="9" value="9" label="夹克1" />
              <TreeSelect.Node key="7" value="7" label="夹克2" />
              <TreeSelect.Node key="8" value="8" label="夹克3" />
            </TreeSelect.Node>
            <TreeSelect.Node key="3" value="3" label="女装">
              <TreeSelect.Node key="6" value="6" label="裙子" />
              <TreeSelect.Node key="10" value="10" label="裙子2" />
              <TreeSelect.Node key="11" value="11" label="裙子3" />
            </TreeSelect.Node>
          </TreeSelect.Node>
        </TreeSelectField>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);