From 60577d6720fd3f8d4d1a88b20ab902d6161a0eec Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: 星期三, 11 八月 2021 17:59:07 +0800
Subject: [PATCH] feat(tree): add searchable function
---
src/components/Tree/src/Tree.vue | 23 ++++++++++++++++++++++-
1 files changed, 22 insertions(+), 1 deletions(-)
diff --git a/src/components/Tree/src/Tree.vue b/src/components/Tree/src/Tree.vue
index 1af3bf8..9b9efb6 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<State>({
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)}
</TreeHeader>
--
Gitblit v1.8.0