feat(select): 远程搜索场景增加 label 回显能力

examples/select/demos/remote-search.vue

@@ -1,7 +1,10 @@
 <template>
+  <!-- 远程搜索场景会改变 options 数组，导致无法检索历史选项，可通过将 valueType 改为 `object` 以从 value 中读取 `label`，解决无法回显的问题 -->
+
   <t-space>
     <t-select
       v-model="value"
+      value-type="object"
       filterable
       placeholder="请选择"
       :onSearch="remoteMethod"
@@ -11,6 +14,7 @@
     />
     <t-select
       v-model="value2"
+      value-type="object"
       multiple
       filterable
       placeholder="请输入搜索"
@@ -33,7 +37,7 @@ export default {
         { label: '选项三', value: '3' },
       ],
       options2: [],
-      value: '',
+      value: {},
       value2: [],
       loading: false,
       loading2: false,
@@ -50,15 +54,15 @@ export default {
         this.loading = false;
         this.options = [
           {
-            value: `${search}test1`,
+            value: `${search}1`,
             label: `${search}test1`,
           },
           {
-            value: `${search}test2`,
+            value: `${search}2`,
             label: `${search}test2`,
           },
           {
-            value: `${search}test3`,
+            value: `${search}3`,
             label: `${search}test3`,
           },
         ];
@@ -71,15 +75,15 @@ export default {
         this.loading2 = false;
         this.options2 = [
           {
-            value: `${search}test1`,
+            value: `${search}1`,
             label: `${search}test1`,
           },
           {
-            value: `${search}test2`,
+            value: `${search}2`,
             label: `${search}test2`,
           },
           {
-            value: `${search}test3`,
+            value: `${search}3`,
             label: `${search}test3`,
           },
         ];

src/select/select-panel.tsx

@@ -297,10 +297,10 @@ export default defineComponent({
           style={innerStyle}
         >
           {renderTNode('panelTopContent')}
-          {isEmpty && this.renderEmptyContent()}
           {isCreateOptionShown && this.renderCreateOption()}
-          {!isEmpty && loading && this.renderLoadingContent()}
-          {!isEmpty && !loading && this.renderOptionsContent(isVirtual && visibleData ? visibleData : displayOptions)}
+          {loading && this.renderLoadingContent()}
+          {!loading && isEmpty && this.renderEmptyContent()}
+          {!loading && !isEmpty && this.renderOptionsContent(isVirtual && visibleData ? visibleData : displayOptions)}
           {renderTNode('panelBottomContent')}
         </div>
       );

src/select/select.tsx

@@ -17,7 +17,7 @@ import isArray from 'lodash/isArray';
 import useDefaultValue from '../hooks/useDefaultValue';
 import { useTNodeJSX } from '../hooks/tnode';
 import { useConfig, usePrefixClass } from '../config-provider/useConfig';
-import { TdSelectProps, SelectValue } from './type';
+import { TdSelectProps, SelectValue, TdOptionProps } from './type';
 import props from './props';
 import TLoading from '../loading';
 import Popup, { PopupVisibleChangeContext } from '../popup';
@@ -90,12 +90,21 @@ export default defineComponent({
     });
     const setInnerValue: TdSelectProps['onChange'] = (newVal: SelectValue | SelectValue[], e) => {
       if (valueType.value === 'object') {
-        const { value, label } = keys.value;
+        const { value: valueOfKeys, label: labelOfKeys } = keys.value;
+
+        // 若为多选情况，将历史 value 加入 option 待取列表，兼容远程搜索改变 options 数组后旧选项无法找到的问题
+        const oldValueMap = new Map<SelectValue, TdOptionProps>();
+        if (multiple.value) {
+          (value.value as TdOptionProps[]).forEach((option) => {
+            oldValueMap.set(option[valueOfKeys], option);
+          });
+        }
+
         const getOption = (val: SelectValue) => {
-          const option = optionsMap.value.get(val);
+          const option = optionsMap.value.get(val) || oldValueMap.get(val);
           return {
-            [value]: get(option, value),
-            [label]: get(option, label),
+            [valueOfKeys]: get(option, valueOfKeys),
+            [labelOfKeys]: get(option, labelOfKeys),
           };
         };
         // eslint-disable-next-line no-param-reassign
@@ -135,14 +144,26 @@ export default defineComponent({
     );
 
     const placeholderText = computed(
-      () => ((!multiple.value && innerPopupVisible.value && getSingleContent(innerValue.value, optionsList.value))
+      () => ((!multiple.value
+          && innerPopupVisible.value
+          && ((valueType.value === 'object' && value.value[keys.value.label])
+            || getSingleContent(innerValue.value, optionsList.value)))
           || placeholder.value)
         ?? t(global.value.placeholder),
     );
 
-    const displayText = computed(() => multiple.value
-      ? getMultipleContent(innerValue.value as SelectValue[], optionsList.value)
-      : getSingleContent(innerValue.value, optionsList.value));
+    const displayText = computed(() => {
+      if (multiple.value) {
+        if (valueType.value === 'object') {
+          return (value.value as SelectValue[]).map((v) => v[keys.value.label]);
+        }
+        return getMultipleContent(innerValue.value as SelectValue[], optionsList.value);
+      }
+      if (valueType.value === 'object' && value.value[keys.value.label]) {
+        return value.value[keys.value.label];
+      }
+      return getSingleContent(innerValue.value, optionsList.value);
+    });
 
     const valueDisplayParams = computed(() => {
       const val = multiple.value

src/select/util.ts

@@ -11,7 +11,7 @@ export const getSingleContent = (value: TdSelectProps['value'], options: SelectO
       return option?.label || String((option as TdOptionProps).value);
     }
   }
-  return value as string;
+  return value !== undefined ? String(value) : undefined;
 };
 
 export const getMultipleContent = (value: SelectValue[], options: SelectOption[]) => {

test/ssr/__snapshots__/ssr.test.js.snap

@@ -12194,7 +12194,7 @@ exports[`ssr snapshot test renders ./examples/select/demos/remote-search.vue cor
     <div class="t-select__wrap" style="width:200px;display:inline-block;margin:0 20px 20px 0;">
       <div class="t-input__wrap t-select-input--empty t-select">
         <div class="t-input t-size-m t-is-default 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 class="t-input__prefix"></div><input autocomplete="" placeholder="请选择" type="text" unselectable="off" 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>