diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 6286f985..1fcf760e 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -759,6 +759,84 @@ export class Select extends React.Component { const itemHeight = this.state.itemHeight; + // 渲染单个选项 + const renderItem = ({index, style}) => { + const item = filtedOptions[index]; + const checked = + selectedItem === item || + !!~selectionValues.indexOf(item[valueField]); + return ( +
+ {removable ? ( + + this.handleDeleteClick(e, item)} + /> + + ) : null} + {editable ? ( + + this.handleEditClick(e, item)} + /> + + ) : null} + + {checkAll || multiple ? ( + { + this.handleChange(item); + }} + disabled={item.disabled} + > + {item.disabled + ? item[labelField] + : highlight( + item[labelField], + inputValue as string, + cx('Select-option-hl') + )} + + {item.tip} + + ) : ( + + {item.disabled + ? item[labelField] + : highlight( + item[labelField], + inputValue as string, + cx('Select-option-hl') + )} + {item.tip} + + )} +
+ ); + } + const menu = (
{searchable ? ( @@ -798,89 +876,17 @@ export class Select extends React.Component {
{filtedOptions.length ? ( + filtedOptions.length > 100 ? ( // 超过 100 个数据才启用 virtuallist 避免滚动条问题 8 ? 280 : filtedOptions.length * itemHeight } itemCount={filtedOptions.length} itemSize={itemHeight} - renderItem={({index, style}) => { - const item = filtedOptions[index]; - const checked = - selectedItem === item || - !!~selectionValues.indexOf(item[valueField]); - return ( -
- {removable ? ( - - this.handleDeleteClick(e, item)} - /> - - ) : null} - {editable ? ( - - this.handleEditClick(e, item)} - /> - - ) : null} - - {checkAll || multiple ? ( - { - this.handleChange(item); - }} - disabled={item.disabled} - > - {item.disabled - ? item[labelField] - : highlight( - item[labelField], - inputValue as string, - cx('Select-option-hl') - )} - - {item.tip} - - ) : ( - - {item.disabled - ? item[labelField] - : highlight( - item[labelField], - inputValue as string, - cx('Select-option-hl') - )} - {item.tip} - - )} -
- ); - }} - /> + renderItem={renderItem} + />): ( + filtedOptions.map((item, index) => { return renderItem({index}) }) + ) ) : (
{__(noResultsText)}
)} diff --git a/src/components/virtual-list/index.tsx b/src/components/virtual-list/index.tsx index 099e8af1..e8efe0fc 100644 --- a/src/components/virtual-list/index.tsx +++ b/src/components/virtual-list/index.tsx @@ -177,12 +177,7 @@ export default class VirtualList extends React.PureComponent { } // 自适应宽度 - updateRootWidth(isDidUpdate: boolean = false) { - let scrollbarWidth = - window.innerWidth - document.documentElement.clientWidth || 15; - if (isDidUpdate) { - scrollbarWidth = 0; - } + updateRootWidth() { const itemsDom = this.rootNode.children[0].children; const containerWidth = this.rootNode.parentElement!.getBoundingClientRect() .width; @@ -196,7 +191,7 @@ export default class VirtualList extends React.PureComponent { if (containerWidth >= maxItemWidth) { this.rootNode.style.width = containerWidth + 'px'; } else { - this.rootNode.style.width = maxItemWidth + scrollbarWidth + 'px'; + this.rootNode.style.width = maxItemWidth + 'px'; } } @@ -258,7 +253,7 @@ export default class VirtualList extends React.PureComponent { } componentDidUpdate(_: Props, prevState: State) { - this.updateRootWidth(true); + this.updateRootWidth(); const {offset, scrollChangeReason} = this.state; if ( prevState.offset !== offset &&