diff --git a/assets/index.less b/assets/index.less index b93d9bab..c92cea08 100644 --- a/assets/index.less +++ b/assets/index.less @@ -65,6 +65,13 @@ padding: 0; border-right: 1px solid #e9e9e9; overflow: auto; + &-not-fount { + position: relative; + text-align: center; + top: 50%; + transform: translateY(-50%); + color: #d9d9d9; + } &:last-child { border-right: 0; } @@ -163,4 +170,4 @@ transform-origin: 0% 100%; transform: scaleY(0.8); } -} \ No newline at end of file +} diff --git a/examples/dynamic-options.js b/examples/dynamic-options.js index 726405d4..1609bc3b 100644 --- a/examples/dynamic-options.js +++ b/examples/dynamic-options.js @@ -12,6 +12,10 @@ const addressOptions = [{ label: '浙江', isLeaf: false, value: 'zj', +}, { + label: '北京', + isLeaf: false, + value: 'bj', }]; class Demo extends React.Component { @@ -33,13 +37,18 @@ class Demo extends React.Component { // 动态加载下级数据 setTimeout(() => { targetOption.loading = false; - targetOption.children = [{ - label: `${targetOption.label}动态加载1`, - value: 'dynamic1', - }, { - label: `${targetOption.label}动态加载2`, - value: 'dynamic2', - }]; + + if (targetOption.value === 'bj') { + targetOption.children = []; + } else { + targetOption.children = [{ + label: `${targetOption.label}动态加载1`, + value: 'dynamic1', + }, { + label: `${targetOption.label}动态加载2`, + value: 'dynamic2', + }]; + } this.setState({ options: [...this.state.options], }); @@ -53,6 +62,7 @@ class Demo extends React.Component { loadData={this.loadData} onChange={this.onChange} changeOnSelect + notFoundContent={'无数据'} > diff --git a/src/Menus.jsx b/src/Menus.jsx index 40e5057b..8c904bd9 100644 --- a/src/Menus.jsx +++ b/src/Menus.jsx @@ -137,12 +137,22 @@ class Menus extends React.Component { } render() { - const { prefixCls, dropdownMenuColumnStyle } = this.props; + const { prefixCls, dropdownMenuColumnStyle, notFoundContent } = this.props; + + const getItem = (options, menuIndex) => { + if (Array.isArray(options) && options.length === 0) { + return ( +
  • {notFoundContent}
  • + ); + } + return options.map(option => this.getOption(option, menuIndex)); + }; + return (
    {this.getShowOptions().map((options, menuIndex) => )}
    @@ -158,6 +168,7 @@ Menus.defaultProps = { prefixCls: 'rc-cascader-menus', visible: false, expandTrigger: 'click', + notFoundContent: '', }; Menus.propTypes = { @@ -173,6 +184,7 @@ Menus.propTypes = { fieldNames: PropTypes.object, expandIcon: PropTypes.node, loadingIcon: PropTypes.node, + notFoundContent: PropTypes.string, }; export default Menus;