diff --git a/packages/semi-ui-vue/package.json b/packages/semi-ui-vue/package.json index b49233f6..db1d39fe 100755 --- a/packages/semi-ui-vue/package.json +++ b/packages/semi-ui-vue/package.json @@ -49,6 +49,7 @@ "vue": "^3.4.21" }, "peerDependencies": { + "lodash": "^4.17.21", "vue": ">=3.3.4" }, "sideEffects": [ diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx index af4fc6ff..00ac2cbc 100755 --- a/packages/semi-ui-vue/src/App.tsx +++ b/packages/semi-ui-vue/src/App.tsx @@ -124,7 +124,7 @@ const App = defineComponent((props, {slots}) => { {/**/} {/**/} {/**/} - + {/**/} {/**/} {/**/} {/**/} @@ -164,7 +164,7 @@ const App = defineComponent((props, {slots}) => { {/**/} {/**/} {/**/} - {/**/} + {/**/} {/**/}
@@ -214,7 +214,7 @@ const App = defineComponent((props, {slots}) => { {/**/} {/**/} {/**/} - + {/**/}
123
diff --git a/packages/semi-ui-vue/src/components/treeSelect/__test__/TreeSelectDemo.tsx b/packages/semi-ui-vue/src/components/treeSelect/__test__/TreeSelectDemo.tsx index 2a56a3eb..91575259 100644 --- a/packages/semi-ui-vue/src/components/treeSelect/__test__/TreeSelectDemo.tsx +++ b/packages/semi-ui-vue/src/components/treeSelect/__test__/TreeSelectDemo.tsx @@ -1,8 +1,8 @@ -import {defineComponent, ref, h, Fragment, useSlots, onMounted} from 'vue' -import TreeSelect from "../index"; +import { defineComponent, h, onMounted, ref, useSlots } from 'vue'; +import TreeSelect from '../index'; interface ExampleProps { - name?: string + name?: string; } export const vuePropsType = { @@ -36,7 +36,7 @@ const TreeSelectDemo = defineComponent((props, {}) => { ], }, { - label: '北美洲', + label: '北美xxxxxxxxxxxxxxxxxxxxxxxxxxxx洲', value: 'North America', key: '1', } @@ -60,6 +60,11 @@ const TreeSelectDemo = defineComponent((props, {}) => { dropdownStyle={{ maxHeight: '400px', overflow: 'auto' }} treeData={treeData} placeholder="请选择" + virtualize={{ + height: 270, + width: '100%', + itemSize: 36, // px + }} /> void; onVisibleChange?: (isVisible: boolean) => void; - onClear?: (e: MouseEvent | KeyboardEvent) => void + onClear?: (e: MouseEvent | KeyboardEvent) => void; id?: string; } @@ -376,7 +376,7 @@ const TreeSelect = defineComponent( 'registerClickOutsideHandler' | 'unregisterClickOutsideHandler' | 'rePositionDropdown' > = { registerClickOutsideHandler: (cb) => { - clickOutsideHandler = (e: Event) => { + clickOutsideHandler = (e: Event) => { // 当组件内部使用了expose时,使用ref得到的内容只有expose的那部分 const optionInstance = optionsRef && optionsRef.value.getRef?.().vnode.el; const triggerDom = triggerRef && triggerRef.value; @@ -407,12 +407,7 @@ const TreeSelect = defineComponent( }; const treeAdapter: Pick< TreeSelectAdapter, - 'updateState' - | 'notifySelect' - | 'notifySearch' - | 'cacheFlattenNodes' - | 'notifyLoad' - | 'notifyClear' + 'updateState' | 'notifySelect' | 'notifySearch' | 'cacheFlattenNodes' | 'notifyLoad' | 'notifyClear' > = { updateState: (states) => { Object.keys(states).forEach((key) => { @@ -434,7 +429,7 @@ const TreeSelect = defineComponent( }, notifyClear: (e: MouseEvent | KeyboardEvent) => { props.onClear && props.onClear(e); - } + }, }; return { ...adapterInject(), @@ -902,7 +897,10 @@ const TreeSelect = defineComponent( const renderContent = () => { const { dropdownMinWidth } = state; const { dropdownStyle, dropdownClassName } = props; - const style = { minWidth: isNaN(dropdownMinWidth)?dropdownMinWidth:(dropdownMinWidth + 'px'), ...dropdownStyle }; + const style = { + minWidth: isNaN(dropdownMinWidth) ? dropdownMinWidth : dropdownMinWidth + 'px', + ...dropdownStyle, + }; const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`); return (
@@ -1517,7 +1515,7 @@ const TreeSelect = defineComponent( const { keyMaps } = props_; const children = data[get(keyMaps, 'children', 'children')]; !isUndefined(children) && (props_.children = children); - return ; + return ; }; const itemKey = (index: number, data: Record) => { @@ -1554,12 +1552,14 @@ const TreeSelect = defineComponent( }; return ( - - {({ height, width }) => ( + ( ( {VirtualRow} )} - + > ); };