diff --git a/src/select/_example/multiple.vue b/src/select/_example/multiple.vue
index e08522923..69797b7c0 100644
--- a/src/select/_example/multiple.vue
+++ b/src/select/_example/multiple.vue
@@ -8,7 +8,14 @@
-
+
@@ -48,6 +55,21 @@ export default {
handleChange(...args) {
console.log('change', ...args);
},
+ valueDisplay(h, { onClose, displayValue }) {
+ if (!(displayValue instanceof Array)) return;
+ return displayValue.map((item, index) => (
+ {
+ context.e && context.e.stopPropagation();
+ onClose(index);
+ }}
+ >
+ {item.label}
+
+ ));
+ },
},
};
diff --git a/src/select/props.ts b/src/select/props.ts
index 7c6e030eb..8f58f3303 100644
--- a/src/select/props.ts
+++ b/src/select/props.ts
@@ -26,11 +26,11 @@ export default {
empty: {
type: [String, Function] as PropType,
},
- /** 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据 */
+ /** 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable` */
filter: {
type: Function as PropType,
},
- /** 是否可搜索 */
+ /** 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则 */
filterable: Boolean,
/** 透传 Input 输入框组件的全部属性 */
inputProps: {
@@ -124,6 +124,7 @@ export default {
/** 输入框状态 */
status: {
type: String as PropType,
+ default: 'default' as TdSelectProps['status'],
validator(val: TdSelectProps['status']): boolean {
if (!val) return true;
return ['default', 'success', 'warning', 'error'].includes(val);
diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md
index 66c1a6138..82d9b1898 100644
--- a/src/select/select.en-US.md
+++ b/src/select/select.en-US.md
@@ -33,17 +33,17 @@ defaultPopupVisible | Boolean | - | uncontrolled property | N
prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
readonly | Boolean | false | \- | N
reserveKeyword | Boolean | false | \- | N
-scroll | Object | - | lazy load and virtual scroll。Typescript：`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+scroll | Object | - | lazy load and virtual scroll。Typescript：`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
showArrow | Boolean | true | \- | N
size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-status | String | - | options：default/success/warning/error | N
+status | String | default | options：default/success/warning/error | N
tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | String / Number / Object / Array | - | `v-model` is supported。Typescript：`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript：`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
-valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript：`string \| TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript：`string \| TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
valueType | String | value | options：value/object | N
onBlur | Function | | Typescript：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
| N
onChange | Function | | Typescript：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N
@@ -88,3 +88,13 @@ name | type | default | description | required
-- | -- | -- | -- | --
divider | Boolean | true | \- | N
label | String | - | \- | N
+
+### InfinityScroll
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bufferSize | Number | 20 | \- | N
+isFixedRowHeight | Boolean | false | \- | N
+rowHeight | Number | - | \- | N
+threshold | Number | 100 | \- | N
+type | String | - | required。options：lazy/virtual | Y
diff --git a/src/select/select.md b/src/select/select.md
index 2bd5fd629..f3f94dd6d 100644
--- a/src/select/select.md
+++ b/src/select/select.md
@@ -12,8 +12,8 @@ collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项
creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N
disabled | Boolean | - | 是否禁用组件 | N
empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N
-filterable | Boolean | false | 是否可搜索 | N
+filter | Function | - | 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N
+filterable | Boolean | false | 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则 | N
inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
@@ -33,17 +33,17 @@ defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
-scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`InfinityScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
showArrow | Boolean | true | 是否显示右侧箭头，默认显示 | N
size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-status | String | - | 输入框状态。可选项：default/success/warning/error | N
+status | String | default | 输入框状态。可选项：default/success/warning/error | N
tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | String / Number / Object / Array | - | 选中值。支持语法糖 `v-model`。TS 类型：`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue = string \| number \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N
-valueDisplay | String / Slot / Function | - | 自定义选中项呈现方式。TS 类型：`string \| TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+valueDisplay | String / Slot / Function | - | 自定义选中项呈现方式。TS 类型：`string \| TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。。可选项：value/object | N
onBlur | Function | | TS 类型：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`
输入框失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`
选中值变化时触发。`context.trigger` 表示触发变化的来源；`context.selectedOptions` 表示选中值的完整对象，数组长度一定和 `value` 相同；`context.option` 表示当前操作的选项，不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N
@@ -88,3 +88,13 @@ value | String / Number | - | 选项值 | N
-- | -- | -- | -- | --
divider | Boolean | true | 是否显示分隔线 | N
label | String | - | 分组别名 | N
+
+### InfinityScroll
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bufferSize | Number | 20 | 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N
+isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N
+rowHeight | Number | - | 行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑 | N
+threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 | N
+type | String | - | 必需。滚动加载类型，有两种：懒加载和虚拟滚动。
值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；
值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y
diff --git a/src/select/select.tsx b/src/select/select.tsx
index 27465f3ad..0ff618a3d 100644
--- a/src/select/select.tsx
+++ b/src/select/select.tsx
@@ -244,10 +244,17 @@ export default defineComponent({
label: optionsMap.value.get(value)?.label,
}))
: innerValue.value;
- return {
+ const params = {
value: val,
onClose: multiple.value ? (index: number) => removeTag(index) : () => {},
};
+ if (minCollapsedNum.value && multiple.value) {
+ return {
+ ...params,
+ displayValue: val?.slice?.(0, minCollapsedNum.value),
+ };
+ }
+ return params;
});
const collapsedItemsParams = computed(() => multiple.value
diff --git a/src/select/type.ts b/src/select/type.ts
index b9a4f31e0..a4284a86a 100644
--- a/src/select/type.ts
+++ b/src/select/type.ts
@@ -12,7 +12,7 @@ import { TagInputProps } from '../tag-input';
import { TagProps } from '../tag';
import { SelectInputValueChangeContext } from '../select-input';
import { PopupVisibleChangeContext } from '../popup';
-import { TNode, SizeEnum, TScroll } from '../common';
+import { TNode, SizeEnum, InfinityScroll } from '../common';
export interface TdSelectProps {
/**
@@ -48,11 +48,11 @@ export interface TdSelectProps {
*/
empty?: string | TNode;
/**
- * 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据
+ * 自定义搜索规则，用于对现有数据进行搜索，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`
*/
filter?: (filterWords: string, option: T) => boolean | Promise;
/**
- * 是否可搜索
+ * 是否可搜索，默认搜索规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则
*/
filterable?: boolean;
/**
@@ -140,7 +140,7 @@ export interface TdSelectProps {
/**
* 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`
*/
- scroll?: TScroll;
+ scroll?: InfinityScroll;
/**
* 透传 SelectInput 筛选器输入框组件的全部属性
*/
@@ -157,6 +157,7 @@ export interface TdSelectProps {
size?: SizeEnum;
/**
* 输入框状态
+ * @default default
*/
status?: 'default' | 'success' | 'warning' | 'error';
/**
@@ -182,7 +183,9 @@ export interface TdSelectProps {
/**
* 自定义选中项呈现方式
*/
- valueDisplay?: string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>;
+ valueDisplay?:
+ | string
+ | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void; displayValue?: SelectValue }>;
/**
* 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。
* @default value