fix(Transfer): fix tree data filter error (#3137)

* fix(Transfer): fix tree data filter error * fix(Transfer): fix tree data filter error
Tencent · Apr 11, 2024 · a6f9bf8 · a6f9bf8
1 parent 0a8c6c0
commit a6f9bf8
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 9 deletions.
diff --git a/src/transfer/_example-composition/tree.vue b/src/transfer/_example-composition/tree.vue
@@ -1,6 +1,7 @@
 <template>
   <t-transfer
     :data="items"
+    :search="true"
     v-model="targetValue"
     :checked.sync="checked"
     @change="onChange"

diff --git a/src/transfer/_example/tree.vue b/src/transfer/_example/tree.vue
@@ -1,6 +1,7 @@
 <template>
   <t-transfer
     :data="items"
+    :search="true"
     v-model="targetValue"
     :checked.sync="checked"
     @change="onChange"

diff --git a/src/transfer/components/transfer-list.tsx b/src/transfer/components/transfer-list.tsx
@@ -12,7 +12,7 @@ import {
 import { PageInfo, TdPaginationProps, Pagination as TPagination } from '../../pagination';
 import { Checkbox as TCheckbox, CheckboxGroup as TCheckboxGroup, CheckboxProps } from '../../checkbox';
 import {
-  findTopNode, getLeafCount, getDataValues, TARGET,
+  findTopNode, getLeafCount, getDataValues, TARGET, filterTreeData,
 } from '../utils';
 import ripple from '../../utils/ripple';
 import Search from './transfer-search';
@@ -109,10 +109,13 @@ export default mixins(keepAnimationMixins, classPrefixMixins).extend({
       return (this.filteredData && this.filteredData.length) || 0;
     },
     filteredData(): Array<TransferItemOption> {
-      return this.dataSource.filter((item: TransferItemOption) => {
-        const label = item && item.label.toString();
-        return label.toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1;
-      });
+      if (!this.isTreeMode) {
+        return this.dataSource.filter((item: TransferItemOption) => {
+          const label = item && item.label.toString();
+          return label.toLowerCase().indexOf(this.filterValue.toLowerCase()) > -1;
+        });
+      }
+      return filterTreeData(this.dataSource, this.filterValue);
     },
     curPageData(): Array<TransferItemOption> {
       let pageData = this.filteredData;

diff --git a/src/transfer/utils.ts b/src/transfer/utils.ts
@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
+import filter from 'lodash/filter';
+
 import {
   TransferListOptionBase, TransferItemOption, TdTransferProps, TransferValue, DataOption,
 } from './interface';
@@ -199,6 +201,24 @@ function getLeafCount(nodes: Array<TreeNode>): number {
   return total;
 }
 
+// 递归过滤树结构
+// sync from https://github.com/Tencent/tdesign-vue-next/pull/3336
+function filterTreeData(tree: Array<TransferItemOption>, filterStr: string): Array<TransferItemOption> {
+  const res = filter(cloneDeep(tree), (node) => {
+    if (node.label.toLowerCase().indexOf(filterStr.toLowerCase()) > -1) {
+      return true;
+    }
+    if (node?.children?.length > 0) {
+      // eslint-disable-next-line no-param-reassign
+      node.children = filterTreeData(node.children, filterStr);
+
+      return node.children.length > 0;
+    }
+    return false;
+  });
+  return res;
+}
+
 export {
   findTopNode,
   getTransferListOption,
@@ -207,4 +227,5 @@ export {
   cloneTreeWithFilter,
   filterTransferData,
   getLeafCount,
+  filterTreeData,
 };
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -115655,7 +115655,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/target-value.vue 1
 
 exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = `
 <div
-  class="t-transfer t-transfer--with-tree"
+  class="t-transfer t-transfer__search t-transfer--with-tree"
 >
   <div
     class="t-transfer__list t-transfer__list-source"
@@ -115688,8 +115688,43 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = `
       <span />
     </div>
     <div
-      class="t-transfer__list-body"
+      class="t-transfer__list-body t-transfer__list--with-search"
     >
+      <div
+        class="t-transfer__search-wrapper"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-input--suffix"
+          >
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="请输入关键词搜索"
+              type="text"
+              unselectable="off"
+            />
+            <span
+              class="t-input__suffix t-input__suffix-icon"
+            >
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
       <div
         class="t-transfer__list-content narrow-scrollbar"
       >
@@ -116137,8 +116172,43 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = `
       <span />
     </div>
     <div
-      class="t-transfer__list-body"
+      class="t-transfer__list-body t-transfer__list--with-search"
     >
+      <div
+        class="t-transfer__search-wrapper"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-input--suffix"
+          >
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="请输入关键词搜索"
+              type="text"
+              unselectable="off"
+            />
+            <span
+              class="t-input__suffix t-input__suffix-icon"
+            >
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
       <div
         class="t-transfer__empty"
       >