Wym-cascader NPM

wym-cascader

React Cascader Component

Browser Support


IE 8+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Screenshots

Example

http://react-component.github.io/cascader/

Install

$ npm install rc-cascader --save

Usage

import React from 'react';
import Cascader from 'rc-cascader';

const options = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
    }],
  }, {
    'label': '泉州',
    'value': 'quanzhou',
  }],
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
    }],
  }],
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',
  }],
}];

React.render(
  <Cascader options={options}>
    ...
  </Cascader>
, container);

定制功能

支持级联菜单自定义，参考animation.html

const addressOptions = [{
      label: '福建',
      value: 'fj',
      children: [{
        label: '福州',
        value: 'fuzhou',
        children: [{
          label: '马尾',
          value: 'mawei',
          children:[{
            custom:true,   // 传入custom字段可以自定义
            jsx:<div key="jsjjs">   
              <p>总积分：500</p>
              <input placeholder="请确认" style={{width:'50px'}}/>
              <input type="button" value="确认" onClick={this.handleClick}/>
            </div>
          }]
        }],
      }, {
        label: '泉州',
        value: 'quanzhou',
      }],
    }, {
      label: '浙江',
      value: 'zj',
      children: [{
        label: '杭州',
        value: 'hangzhou',
        children: [{
          label: '余杭',
          value: 'yuhang',
        }],
      }],
    }, {
      label: '北京',
      value: 'bj',
      children: [{
        label: '朝阳区',
        value: 'chaoyang',
      }, {
        label: '海淀区',
        value: 'haidian',
      }],
    }];