uxcore.js - React UI Component Set

组件演示

[{"title":"基本用法","id":"components-tree-select-demo-basic","tags":[],"filepath":"site/components/tree-select/demo/basic.md","directory":"components/tree-select/demo","filename":"basic","meta":{"title":"基本用法","description":"\n基本用法。\n","order":"0","filepath":"site/components/tree-select/demo/basic.md","filename":"basic","directory":"components/tree-select/demo","id":"components-tree-select-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n inputValue: '0-0-0-label',\n value: '0-0-0-value'\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'onChange',\n value: function onChange(value) {\n this.setState({ value: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n showSearch: false, allowClear: true, treeLine: false,\n inputValue: this.state.inputValue,\n value: this.state.value,\n treeData: gData,\n treeNodeFilterProp: 'label',\n filterTreeNode: false,\n onChange: this.onChange.bind(this)\n });\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-tree-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { TreeSelect } from 'uxcore';\n\nfunction generateData(x = 3, y = 2, z = 1, gData = []) {\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const __level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nconst gData = generateData();\n\nclass BasicDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n inputValue: '0-0-0-label',\n value: '0-0-0-value',\n };\n }\n onChange(value) {\n this.setState({ value });\n }\n render() {\n return (<TreeSelect style={{ width: 300 }}\n dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}\n placeholder={<i>请下拉选择</i>}\n searchPlaceholder=\"please search\"\n showSearch={false} allowClear treeLine={false}\n inputValue={this.state.inputValue}\n value={this.state.value}\n treeData={gData}\n treeNodeFilterProp=\"label\"\n filterTreeNode={false}\n onChange={this.onChange.bind(this)}\n />);\n }\n}\n\nReactDOM.render(\n <BasicDemo />,\n document.getElementById('components-tree-select-demo-basic')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"多选","id":"components-tree-select-demo-multiple","tags":[],"filepath":"site/components/tree-select/demo/multiple.md","directory":"components/tree-select/demo","filename":"multiple","meta":{"title":"多选","description":"\n多选。\n","order":"0","filepath":"site/components/tree-select/demo/multiple.md","filename":"multiple","directory":"components/tree-select/demo","id":"components-tree-select-demo-multiple","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar MultipleDemo = function (_React$Component) {\n _inherits(MultipleDemo, _React$Component);\n\n function MultipleDemo(props) {\n _classCallCheck(this, MultipleDemo);\n\n var _this = _possibleConstructorReturn(this, (MultipleDemo.__proto__ || Object.getPrototypeOf(MultipleDemo)).call(this, props));\n\n _this.state = {\n inputValue: '0-0-0-label',\n multipleValue: []\n };\n return _this;\n }\n\n _createClass(MultipleDemo, [{\n key: 'onMultipleChange',\n value: function onMultipleChange(value) {\n this.setState({ multipleValue: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n multiple: true,\n inputValue: this.state.inputValue,\n value: this.state.multipleValue,\n treeData: gData,\n treeNodeFilterProp: 'title',\n onChange: this.onMultipleChange.bind(this)\n });\n }\n }]);\n\n return MultipleDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(MultipleDemo, null), document.getElementById('components-tree-select-demo-multiple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { TreeSelect } from 'uxcore';\n\nfunction generateData(x = 3, y = 2, z = 1, gData = []) {\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const __level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nconst gData = generateData();\n\nclass MultipleDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n inputValue: '0-0-0-label',\n multipleValue: [],\n };\n }\n onMultipleChange(value) {\n this.setState({ multipleValue: value });\n }\n render() {\n return (<TreeSelect style={{ width: 300 }}\n dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}\n placeholder={<i>请下拉选择</i>}\n searchPlaceholder=\"please search\"\n multiple\n inputValue={this.state.inputValue}\n value={this.state.multipleValue}\n treeData={gData}\n treeNodeFilterProp=\"title\"\n onChange={this.onMultipleChange.bind(this)}\n />);\n }\n}\n\nReactDOM.render(\n <MultipleDemo />,\n document.getElementById('components-tree-select-demo-multiple')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"check select","id":"components-tree-select-demo-check","tags":[],"filepath":"site/components/tree-select/demo/check.md","directory":"components/tree-select/demo","filename":"check","meta":{"title":"check select","description":"\ncheck select\n","order":"2","filepath":"site/components/tree-select/demo/check.md","filename":"check","directory":"components/tree-select/demo","id":"components-tree-select-demo-check","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar SHOW_PARENT = _uxcore.TreeSelect.SHOW_PARENT;\n\nfunction generateData() {\n var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;\n var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n var gData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];\n\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n var preKey = _preKey || '0';\n var tns = _tns || gData;\n\n var children = [];\n for (var i = 0; i < x; i++) {\n var key = preKey + '-' + i;\n tns.push({ label: key + '-label', value: key + '-value', key: key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n var __level = _level - 1;\n children.forEach(function (key, index) {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nvar gData = generateData();\n\nvar CheckDemo = function (_React$Component) {\n _inherits(CheckDemo, _React$Component);\n\n function CheckDemo(props) {\n _classCallCheck(this, CheckDemo);\n\n var _this = _possibleConstructorReturn(this, (CheckDemo.__proto__ || Object.getPrototypeOf(CheckDemo)).call(this, props));\n\n _this.state = {\n value: '0-0-0-value'\n };\n return _this;\n }\n\n _createClass(CheckDemo, [{\n key: 'onChange',\n value: function onChange(value) {\n this.setState({ value: value });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(_uxcore.TreeSelect, { style: { width: 300 },\n dropdownStyle: { maxHeight: 200, overflow: 'auto' },\n dropdownPopupAlign: { overflow: { adjustY: 0, adjustX: 0 } },\n placeholder: React.createElement(\n 'i',\n null,\n '\\u8BF7\\u4E0B\\u62C9\\u9009\\u62E9'\n ),\n searchPlaceholder: 'please search',\n treeLine: false, maxTagTextLength: 10,\n inputValue: null,\n value: this.state.value,\n treeData: gData,\n treeNodeFilterProp: 'title',\n treeCheckable: true, showCheckedStrategy: SHOW_PARENT,\n onChange: this.onChange.bind(this)\n });\n }\n }]);\n\n return CheckDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(CheckDemo, null), document.getElementById('components-tree-select-demo-check'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { TreeSelect } from 'uxcore';\nconst SHOW_PARENT = TreeSelect.SHOW_PARENT;\n\nfunction generateData(x = 3, y = 2, z = 1, gData = []) {\n // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）\n function _loop(_level, _preKey, _tns) {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const __level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return _loop(__level, key, tns[index].children);\n });\n }\n _loop(z);\n return gData;\n}\n\nconst gData = generateData();\n\nclass CheckDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: '0-0-0-value',\n };\n }\n onChange(value) {\n this.setState({ value });\n }\n render() {\n return (<TreeSelect style={{ width: 300 }}\n dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}\n dropdownPopupAlign={{ overflow: { adjustY: 0, adjustX: 0 } }}\n placeholder={<i>请下拉选择</i>}\n searchPlaceholder=\"please search\"\n treeLine={false} maxTagTextLength={10}\n inputValue={null}\n value={this.state.value}\n treeData={gData}\n treeNodeFilterProp=\"title\"\n treeCheckable showCheckedStrategy={SHOW_PARENT}\n onChange={this.onChange.bind(this)}\n />);\n }\n}\n\nReactDOM.render(\n <CheckDemo />,\n document.getElementById('components-tree-select-demo-check')\n);</code></pre></div>"},"status":"public","toc":""}]

基本用法

基本用法。

import { TreeSelect } from 'uxcore';

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
  function _loop(_level, _preKey, _tns) {
    const preKey = _preKey || '0';
    const tns = _tns || gData;

    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '0-0-0-label',
      value: '0-0-0-value',
    };
  }
  onChange(value) {
    this.setState({ value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      showSearch={false} allowClear treeLine={false}
      inputValue={this.state.inputValue}
      value={this.state.value}
      treeData={gData}
      treeNodeFilterProp="label"
      filterTreeNode={false}
      onChange={this.onChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <BasicDemo />,
      document.getElementById('components-tree-select-demo-basic')
);

多选

多选。

import { TreeSelect } from 'uxcore';

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
  function _loop(_level, _preKey, _tns) {
    const preKey = _preKey || '0';
    const tns = _tns || gData;

    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class MultipleDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '0-0-0-label',
      multipleValue: [],
    };
  }
  onMultipleChange(value) {
    this.setState({ multipleValue: value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      multiple
      inputValue={this.state.inputValue}
      value={this.state.multipleValue}
      treeData={gData}
      treeNodeFilterProp="title"
      onChange={this.onMultipleChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <MultipleDemo />,
      document.getElementById('components-tree-select-demo-multiple')
);

check select

import { TreeSelect } from 'uxcore';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

function generateData(x = 3, y = 2, z = 1, gData = []) {
  // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
  function _loop(_level, _preKey, _tns) {
    const preKey = _preKey || '0';
    const tns = _tns || gData;

    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const __level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return _loop(__level, key, tns[index].children);
    });
  }
  _loop(z);
  return gData;
}

const gData = generateData();

class CheckDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '0-0-0-value',
    };
  }
  onChange(value) {
    this.setState({ value });
  }
  render() {
    return (<TreeSelect style={{ width: 300 }}
      dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
      dropdownPopupAlign={{ overflow: { adjustY: 0, adjustX: 0 } }}
      placeholder={<i>请下拉选择</i>}
      searchPlaceholder="please search"
      treeLine={false} maxTagTextLength={10}
      inputValue={null}
      value={this.state.value}
      treeData={gData}
      treeNodeFilterProp="title"
      treeCheckable showCheckedStrategy={SHOW_PARENT}
      onChange={this.onChange.bind(this)}
    />);
  }
}

ReactDOM.render(
  <CheckDemo />,
      document.getElementById('components-tree-select-demo-check')
);

树型选择控件

何时使用

类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。

API

TreeSelect props

name	description	type	default
className	additional css class of root dom node	String	''
prefixCls	prefix class	String	'uxcore-tree-select'
animation	dropdown animation name. only support slide-up now	String	''
transitionName	dropdown css animation name	String	''
choiceTransitionName	css animation name for selected items at multiple mode	String	''
dropdownMatchSelectWidth	whether dropdown's with is same with select	bool	true
dropdownClassName	additional className applied to dropdown	String	-
dropdownStyle	additional style applied to dropdown	Object	{}
dropdownPopupAlign	specify alignment for dropdown	Object	-
notFoundContent	specify content to show when no result matches.	String	'Not Found'
showSearch	whether show search input in single mode	bool	true
allowClear	whether allowClear	bool	false
maxTagTextLength	max tag text length to show	number	-
multiple	whether multiple select (true when enable treeCheckable)	bool	false
disabled	whether disabled select	bool	false
inputValue	if enable search, you can set default input's value, if set to null, auto clear input value when finish select/unselect operation	string/null	''
defaultValue	initial selected treeNode(s)	same as value type	-
value	current selected treeNode(s).	normal: String/Array. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>.	-
labelInValue	whether to embed label in value, see above value type	Bool	false
onChange	called when select treeNode or input value change	function(value, label(null), extra)	-
onSelect	called when select treeNode	function(value, node, extra)	-
onSearch	called when input changed	function	-
showCheckedStrategy	`TreeSelect.SHOW_ALL`: show all checked treeNodes (Include parent treeNode). `TreeSelect.SHOW_PARENT`: show checked treeNodes (Just show parent treeNode). Default just show child.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
treeIcon	show tree icon	bool	false
treeLine	show tree line	bool	false
treeDefaultExpandAll	default expand all treeNode	bool	false
treeCheckable	whether tree show checkbox (select callback will not fire)	bool	false
treeCheckStrictly	check node precisely, parent and children nodes are not associated	bool	false
filterTreeNode	whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value	bool/Function(inputValue:string, treeNode:TreeNode)	Function
treeNodeFilterProp	which prop value of treeNode will be used for filter if filterTreeNode return true	String	'value'
treeNodeLabelProp	which prop value of treeNode will render as content of select	String	'title'
treeData	treeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)	array<{value,label,children, [disabled]}>	[]
treeDataSimpleMode	enable simple mode of treeData.(treeData should be like this: [{"id":1, "pId":0, "label":"test1"},...], `pId` is parent node's id)	bool/object{id:'id', pId:'pId', rootPId:null}	false
loadData	load data asynchronously	function(node)	-

TreeNode props

note: you'd better to use treeData instead of using TreeNode.

name	description	type	default
disabled	disable treeNode	bool	false
key	it's value must be unique across the tree's all TreeNode, you must set it	String	-
value	default as treeNodeFilterProp (be unique across the tree's all TreeNode)	String	''
title	tree/subTree's title	String/element	'---'
isLeaf	whether it's leaf node	bool	false