fix(Select): improve performance when filtering options (#2722)

* fix(Select): improve performance when filtering options Co-authored-by: moonye6 <464461539@qq.com> * chore: update snapshot --------- Co-authored-by: moonye6 <464461539@qq.com>
Tencent · Aug 23, 2023 · 9870229 · 9870229
1 parent 107b38f
commit 9870229
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/src/select/_example/virtual-scroll.vue b/src/select/_example/virtual-scroll.vue
@@ -4,6 +4,7 @@
     <t-select
       v-model="value1"
       :options="options"
+      filterable
       placeholder="请选择"
       :style="{ width: '300px' }"
       :scroll="{ type: 'virtual' }"

diff --git a/src/select/util.ts b/src/select/util.ts
@@ -42,9 +42,7 @@ export const getNewMultipleValue = (innerValue: SelectValue[], optionValue: Sele
 export const getAllSelectableOption = (options: TdOptionProps[]) => options.filter((option) => !option.disabled && !option.checkAll);
 
 /** 将 options 扁平化，拍扁所有 group */
-export const flattenOptions = (options: (TdOptionProps & { isCreated?: boolean })[]): SelectOption[] => options.reduce(
-  (pre, current) => pre.concat(
-    (current as SelectOptionGroup).group ? flattenOptions((current as SelectOptionGroup).children) : current,
-  ),
-    [] as SelectOption[],
-);
+export const flattenOptions = (options: (TdOptionProps & { isCreated?: boolean })[]): SelectOption[] => options.reduce((acc, current) => {
+  acc.push((current as SelectOptionGroup).group ? flattenOptions((current as SelectOptionGroup).children) : current);
+  return acc;
+}, [] as SelectOption[]);
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -86682,7 +86682,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/virtual-scroll.vue 1
           class="t-input__wrap"
         >
           <div
-            class="t-input t-is-readonly t-input--prefix t-input--suffix"
+            class="t-input t-input--prefix t-input--suffix"
           >
             <div
               class="t-input__prefix"
@@ -86691,9 +86691,8 @@ exports[`csr snapshot test > csr test ./src/select/_example/virtual-scroll.vue 1
               autocomplete=""
               class="t-input__inner"
               placeholder="请选择"
-              readonly="readonly"
               type="text"
-              unselectable="on"
+              unselectable="off"
             />
             <span
               class="t-input__suffix t-input__suffix-icon"

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
@@ -833,7 +833,7 @@ exports[`ssr snapshot test > renders ./src/select/_example/size.vue correctly 1`
 
 exports[`ssr snapshot test > renders ./src/select/_example/status.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择云解决方案\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input disabled=\\"disabled\\" readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择云解决方案\\" type=\\"text\\" unselectable=\\"on\\" title=\\"\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择云解决方案\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><div class=\\"t-loading--center t-size-s t-loading t-select__right-icon t-select__active-icon\\"><svg viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\" size=\\"small\\" class=\\"t-loading__gradient t-icon-loading\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > renders ./src/select/_example/virtual-scroll.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:300px;\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:300px;\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > renders ./src/select/_example/virtual-scroll.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:300px;\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input autocomplete=\\"\\" placeholder=\\"请选择\\" type=\\"text\\" unselectable=\\"off\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:300px;\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/select-input/_example/autocomplete.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-select-input t-select-input--empty\\" style=\\"width:300px;\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input autocomplete=\\"\\" placeholder=\\"请输入任意关键词\\" type=\\"text\\" unselectable=\\"off\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-search\\"><path fill=\\"currentColor\\" 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\\"></path></svg></span></div></div></div>"`;