feat(tree): add searchable function

添加搜索功能相关属性和方法 close: #1057

feat(tree): add searchable function
添加搜索功能相关属性和方法 close: #1057
无木
1 parent 953bfc6f
Showing 5 changed files with 51 additions and 7 deletions
CHANGELOG.zh_CN.md
src/components/Tree/src/Tree.vue
src/components/Tree/src/TreeHeader.vue
src/components/Tree/src/props.ts
src/components/Tree/src/typing.ts
+### ✨ Features
+
+- **BasicTree** 添加搜索功能相关属性和方法
+
 ### 🐛 Bug Fixes
 - **Cropper** 修复未能及时销毁的问题
@@ -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>
@@ -11,7 +11,7 @@
           :placeholder="t('common.searchText')"
           size="small"
           allowClear
-          @change="handleSearch"
+          v-model:value="searchValue"
         />
       </div>
       <Dropdown @click.prevent v-if="toolbar">
@@ -32,7 +32,7 @@
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, ref, watch } from 'vue';
   import { Dropdown, Menu, Input } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
@@ -77,10 +77,12 @@
       search: propTypes.bool,
       checkAll: propTypes.func,
       expandAll: propTypes.func,
+      searchText: propTypes.string,
     },
     emits: ['strictly-change', 'search'],
     setup(props, { emit }) {
       const { t } = useI18n();
+      const searchValue = ref('');
       const toolbarList = computed(() => {
         const { checkable } = props;
@@ -137,11 +139,25 @@
       }
       const debounceEmitChange = useDebounceFn(emitChange, 200);
-      function handleSearch(e: ChangeEvent): void {
-        debounceEmitChange(e.target.value);
-      }
+      watch(
+        () => searchValue.value,
+        (v) => {
+          debounceEmitChange(v);
+        }
+      );
+      watch(
+        () => props.searchText,
+        (v) => {
+          if (v !== searchValue.value) {
+            searchValue.value = v;
+          }
+        }
+      );
+      // function handleSearch(e: ChangeEvent): void {
+      //   debounceEmitChange(e.target.value);
+      // }
-      return { t, toolbarList, handleMenuClick, handleSearch };
+      return { t, toolbarList, handleMenuClick, searchValue };
     },
   });
 </script>
@@ -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),
@@ -34,6 +34,8 @@ export interface TreeActionType {
   insertNodesByKey: (opt: InsertNodeParams) => void;
   deleteNodeByKey: (key: string) => void;
   updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
+  setSearchValue: (value: string) => void;
+  getSearchValue: () => string;
 }
 export interface InsertNodeParams {