diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 8b43bf28..d492b80e 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,3 +1,7 @@ +### ✨ Features + +- **BasicTree** 添加搜索功能相关属性和方法 + ### 🐛 Bug Fixes - **Cropper** 修复未能及时销毁的问题 diff --git a/src/components/Tree/src/Tree.vue b/src/components/Tree/src/Tree.vue index 1af3bf85..9b9efb69 100644 --- a/src/components/Tree/src/Tree.vue +++ b/src/components/Tree/src/Tree.vue @@ -42,7 +42,14 @@ name: 'BasicTree', inheritAttrs: false, props: basicProps, - emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check'], + emits: [ + 'update:expandedKeys', + 'update:selectedKeys', + 'update:value', + 'change', + 'check', + 'update:searchValue', + ], setup(props, { attrs, slots, emit, expose }) { const state = reactive({ checkStrictly: props.checkStrictly, @@ -192,7 +199,14 @@ state.checkStrictly = strictly; } + const searchText = ref(''); + watchEffect(() => { + if (props.searchValue !== searchText.value) searchText.value = props.searchValue; + }); + function handleSearch(searchValue: string) { + if (searchValue !== searchText.value) searchText.value = searchValue; + emit('update:searchValue', searchValue); if (!searchValue) { searchState.startSearch = false; return; @@ -293,6 +307,12 @@ filterByLevel: (level: number) => { state.expandedKeys = filterByLevel(level); }, + setSearchValue: (value: string) => { + handleSearch(value); + }, + getSearchValue: () => { + return searchText.value; + }, }; expose(instance); @@ -380,6 +400,7 @@ helpMessage={helpMessage} onStrictlyChange={onStrictlyChange} onSearch={handleSearch} + searchText={unref(searchText)} > {extendSlots(slots)} diff --git a/src/components/Tree/src/TreeHeader.vue b/src/components/Tree/src/TreeHeader.vue index 3034b46d..9223e1b2 100644 --- a/src/components/Tree/src/TreeHeader.vue +++ b/src/components/Tree/src/TreeHeader.vue @@ -11,7 +11,7 @@ :placeholder="t('common.searchText')" size="small" allowClear - @change="handleSearch" + v-model:value="searchValue" /> @@ -32,7 +32,7 @@ diff --git a/src/components/Tree/src/props.ts b/src/components/Tree/src/props.ts index 4fc7b73a..7fb3fce6 100644 --- a/src/components/Tree/src/props.ts +++ b/src/components/Tree/src/props.ts @@ -20,6 +20,7 @@ export const basicProps = { title: propTypes.string, toolbar: propTypes.bool, search: propTypes.bool, + searchValue: propTypes.string, checkStrictly: propTypes.bool, clickRowToExpand: propTypes.bool.def(true), checkable: propTypes.bool.def(false), diff --git a/src/components/Tree/src/typing.ts b/src/components/Tree/src/typing.ts index 3b699421..df8d6d9e 100644 --- a/src/components/Tree/src/typing.ts +++ b/src/components/Tree/src/typing.ts @@ -34,6 +34,8 @@ export interface TreeActionType { insertNodesByKey: (opt: InsertNodeParams) => void; deleteNodeByKey: (key: string) => void; updateNodeByKey: (key: string, node: Omit) => void; + setSearchValue: (value: string) => void; + getSearchValue: () => string; } export interface InsertNodeParams {