diff --git a/src/_common b/src/_common index c1eeb3254f..e71bd2161b 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c1eeb3254f3655db518f63b0600df031e25ee7c3 +Subproject commit e71bd2161bd3cd11d23f87f397777fb520057dd2 diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md index 3101507e5d..e80c64f258 100644 --- a/src/cascader/cascader.en-US.md +++ b/src/cascader/cascader.en-US.md @@ -6,6 +6,7 @@ name | type | default | description | required -- | -- | -- | -- | -- autofocus | Boolean | - | \- | N +borderless | Boolean | false | \- | N checkProps | Object | - | Typescript:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N checkStrictly | Boolean | false | \- | N clearable | Boolean | false | \- | N @@ -15,7 +16,7 @@ empty | String / Slot / Function | - | Typescript:`string \| TNode`。[see mor filter | Function | - | Typescript:`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N -keys | Object | - | Typescript:`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N +keys | Object | - | Typescript:`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N lazy | Boolean | true | \- | N load | Function | - | Typescript:`(node: TreeNodeModel) => Promise>` | N @@ -34,19 +35,19 @@ readonly | Boolean | false | \- | N reserveKeyword | Boolean | false | \- | N selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N showAllLevels | Boolean | true | \- | N -size | String | medium | options:large/medium/small。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -status | String | default | options:default/success/warning/error | N +size | String | medium | options: large/medium/small。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N tips | String / Slot / Function | - | tips at the bottom of cascader。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -trigger | String | click | options:click/hover | N +trigger | String | click | options: click/hover | N value | String / Number / Array | [] | `v-model` and `v-model:value` is supported。Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N defaultValue | String / Number / Array | [] | uncontrolled property。Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript:`string \| TNode<{ value: CascaderValue; onClose: (index: number) => void; displayValue?: CascaderValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueMode | String | onlyLeaf | options:onlyLeaf/parentFirst/all | N -valueType | String | single | options:single/full | N +valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N +valueType | String | single | options: single/full | N onBlur | Function | | Typescript:`(context: { value: CascaderValue } & SelectInputBlurContext ) => void`
| N onChange | Function | | Typescript:`(value: CascaderValue, context: CascaderChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts)。
`interface CascaderChangeContext { node?: TreeNodeModel; source: CascaderChangeSource }`

`import { TreeNodeModel } from '@Tree'`

`type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'`
| N onFocus | Function | | Typescript:`(context: { value: CascaderValue; e: FocusEvent }) => void`
| N diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md index e4f1beed96..2526a7ffee 100644 --- a/src/cascader/cascader.md +++ b/src/cascader/cascader.md @@ -6,6 +6,7 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- autofocus | Boolean | - | 自动聚焦 | N +borderless | Boolean | false | 是否为无边框模式 | N checkProps | Object | - | 参考 checkbox 组件 API。TS 类型:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N checkStrictly | Boolean | false | 父子节点选中状态不再关联,可各自选中或取消 | N clearable | Boolean | false | 是否支持清空选项 | N @@ -15,7 +16,7 @@ empty | String / Slot / Function | - | 无匹配选项时的内容,默认全 filter | Function | - | 自定义过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。TS 类型:`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N -keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型:`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N +keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型:`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的子节点,即使 expandAll 被设置为 true,也同样延迟加载 | N load | Function | - | 加载子树数据的方法(仅当节点 children 为 true 时生效)。TS 类型:`(node: TreeNodeModel) => Promise>` | N diff --git a/src/cascader/props.ts b/src/cascader/props.ts index 60e4594bce..d600bd52df 100644 --- a/src/cascader/props.ts +++ b/src/cascader/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 自动聚焦 */ autofocus: Boolean, + /** 是否为无边框模式 */ + borderless: Boolean, /** 参考 checkbox 组件 API */ checkProps: { type: Object as PropType, @@ -38,7 +40,7 @@ export default { inputProps: { type: Object as PropType, }, - /** 用来定义 value / label / children 在 `options` 中对应的字段别名 */ + /** 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名 */ keys: { type: Object as PropType, }, diff --git a/src/cascader/type.ts b/src/cascader/type.ts index 59f64595fa..6299f2e3b3 100644 --- a/src/cascader/type.ts +++ b/src/cascader/type.ts @@ -19,6 +19,11 @@ export interface TdCascaderProps = string | number | T | Array>; diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts index 663d2f8a9f..19fe8a03b1 100644 --- a/src/select/hooks/useSelectOptions.ts +++ b/src/select/hooks/useSelectOptions.ts @@ -22,12 +22,13 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref const innerOptions: UniOption[] = props.options?.map((option) => { const getFormatOption = (option: TdOptionProps) => { - const { value, label } = keys.value; + const { value, label, disabled } = keys.value; const res = { ...option, index: dynamicIndex, label: get(option, label), value: get(option, value), + disabled: get(option, disabled), }; dynamicIndex++; return res; diff --git a/src/select/props.ts b/src/select/props.ts index 402e7ed76e..0556695077 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -47,7 +47,7 @@ export default { defaultInputValue: { type: [String, Number] as PropType, }, - /** 用来定义 value / label 在 `options` 中对应的字段别名 */ + /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ keys: { type: Object as PropType, }, diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index e422ae40b7..a741efbfcf 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -18,7 +18,7 @@ filterable | Boolean | false | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N -keys | Object | - | Typescript:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +keys | Object | - | Typescript:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string; disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N loadingText | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -38,8 +38,8 @@ reserveKeyword | Boolean | false | \- | N scroll | Object | - | lazy load and virtual scroll。Typescript:`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/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-next/blob/develop/src/common.ts) | N -status | String | default | options:default/success/warning/error | N +size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N @@ -48,9 +48,9 @@ tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more value | String / Number / Boolean / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N defaultValue | String / Number / Boolean / Object / Array | - | uncontrolled property。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueType | String | value | options:value/object | 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-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| 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-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
| N onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N onCreate | Function | | Typescript:`(value: string \| number) => void`
| N onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
| N @@ -65,7 +65,7 @@ onSearch | Function | | Typescript:`(filterWords: string, context: { e: Keybo name | params | description -- | -- | -- blur | `(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent })` | \- -change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
+change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
clear | `(context: { e: MouseEvent })` | \- create | `(value: string \| number)` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | \- @@ -102,4 +102,4 @@ bufferSize | Number | 20 | \- | N isFixedRowHeight | Boolean | false | \- | N rowHeight | Number | - | \- | N threshold | Number | 100 | \- | N -type | String | - | required。options:lazy/virtual | Y +type | String | - | required。options: lazy/virtual | Y diff --git a/src/select/select.md b/src/select/select.md index c215dddc49..96810cded8 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -18,7 +18,7 @@ filterable | Boolean | false | 是否可搜索,默认搜索规则不区分大 inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string; disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | 是否为加载状态 | N loadingText | String / Slot / Function | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -50,7 +50,7 @@ defaultValue | String / Number / Boolean / Object / Array | - | 选中值。非 valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| 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-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
| N onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N onCreate | Function | | TS 类型:`(value: string \| number) => void`
当选择新创建的条目时触发 | N onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值 | N @@ -65,7 +65,7 @@ onSearch | Function | | TS 类型:`(filterWords: string, context: { e: Keyboa 名称 | 参数 | 描述 -- | -- | -- blur | `(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent })` | 输入框失去焦点时触发 -change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | 选中值变化时触发。`context.trigger` 表示触发变化的来源;`context.selectedOptions` 表示选中值的完整对象,数组长度一定和 `value` 相同;`context.option` 表示当前操作的选项,不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
+change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | 选中值变化时触发。`context.trigger` 表示触发变化的来源;`context.selectedOptions` 表示选中值的完整对象,数组长度一定和 `value` 相同;`context.option` 表示当前操作的选项,不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`
clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 create | `(value: string \| number)` | 当选择新创建的条目时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | 回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值 diff --git a/src/select/select.tsx b/src/select/select.tsx index 34abb369ca..965e7d3a5e 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -46,6 +46,7 @@ export default defineComponent({ const keys = computed(() => ({ label: props.keys?.label || 'label', value: props.keys?.value || 'value', + disabled: props.keys?.disabled || 'disabled', })); const { options, optionsMap, optionsList, optionsCache, displayOptions } = useSelectOptions( props, diff --git a/src/select/type.ts b/src/select/type.ts index e1d8d36ef2..668c9559eb 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -73,7 +73,7 @@ export interface TdSelectProps { */ defaultInputValue?: InputValue; /** - * 用来定义 value / label 在 `options` 中对应的字段别名 + * 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ keys?: SelectKeysType; /** @@ -306,6 +306,7 @@ export interface TdOptionGroupProps { export interface SelectKeysType { value?: string; label?: string; + disabled?: string; } export type SelectValue = string | number | boolean | T | Array>; diff --git a/src/transfer/props.ts b/src/transfer/props.ts index 5528318776..b9e683fdaf 100644 --- a/src/transfer/props.ts +++ b/src/transfer/props.ts @@ -50,7 +50,7 @@ export default { footer: { type: [Array, Function] as PropType, }, - /** 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ + /** 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id', disabled: 'disabled' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ keys: { type: Object as PropType, }, diff --git a/src/transfer/transfer.md b/src/transfer/transfer.md index a743e7adc6..ec2d534c70 100644 --- a/src/transfer/transfer.md +++ b/src/transfer/transfer.md @@ -13,7 +13,7 @@ direction | String | both | 穿梭框可操作方向。可选项:left/right/bo disabled | Boolean / Array | false | 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true。TS 类型:`boolean \| Array` | N empty | String / Array / Slot / Function | '' | 列表为空时呈现的内容。值类型为数组,则表示分别控制源列表和目标列表数据为空的呈现内容。TS 类型:`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/transfer/type.ts) | N footer | Array / Slot / Function | - | 穿梭框底部内容。TS 类型:`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id', disabled: 'disabled' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N operation | Array / Slot / Function | - | 方向操作按钮。默认显示组件内置操作图标。自定义操作图标示例:['向左', '向右'] 或者 `[() => , () => ]` 或者 `(h, direction) => direction === 'left' ? '《' : '》'`。TS 类型:`Array \| TNode<{ direction: 'left' \| 'right' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N pagination | Object / Array | - | 分页配置,值为空则不显示。具体 API 参考分页组件。值类型为数组,表示可分别控制源列表和目标列表分页组件。TS 类型:`PaginationProps \| Array`,[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | 搜索框配置,值为 false 表示不显示搜索框;值为 true 表示显示默认搜索框;值类型为对象,用于透传 Props 到 Input 组件;值类型为数组,则分别表示控制两侧搜索框。TS 类型:`SearchOption \| Array` `type SearchOption = boolean \| InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/transfer/type.ts) | N diff --git a/src/transfer/type.ts b/src/transfer/type.ts index 6f7f02e28f..792f241f7b 100644 --- a/src/transfer/type.ts +++ b/src/transfer/type.ts @@ -2,12 +2,12 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 19:17:30 * */ import { CheckboxProps } from '../checkbox'; import { PaginationProps, PageInfo } from '../pagination'; import { InputProps } from '../input'; +import { TreeProps } from '../tree'; import { TNode, KeysType } from '../common'; export interface TdTransferProps { @@ -37,7 +37,6 @@ export interface TdTransferProps { direction?: 'left' | 'right' | 'both'; /** * 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true - * @default false */ disabled?: boolean | Array; /** @@ -50,7 +49,7 @@ export interface TdTransferProps { */ footer?: Array | TNode<{ type: TransferListType }>; /** - * 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 + * 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id', disabled: 'disabled' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ keys?: KeysType; /** @@ -71,6 +70,11 @@ export interface TdTransferProps { * @default true */ showCheckAll?: boolean | Array; + /** + * 是否允许通过拖拽对目标列表进行排序 + * @default false + */ + targetDraggable?: boolean; /** * 目标数据列表排列顺序 * @default original @@ -85,6 +89,11 @@ export interface TdTransferProps { * 自定义渲染节点 */ transferItem?: TNode>; + /** + * null + * @default 传入 Tree 组件定义树形结构 + */ + tree?: (tree: TreeProps) => TNode; /** * 目标数据列表数据 * @default [] @@ -95,6 +104,11 @@ export interface TdTransferProps { * @default [] */ defaultValue?: Array; + /** + * 目标数据列表数据 + * @default [] + */ + modelValue?: Array; /** * 数据列表发生变化时触发,`type` 值为 `source`,表示源列表移动到目标列表,值为 `target` 表示目标列表移动到源列表,movedValue 则表示被移动的选项 */ diff --git a/src/transfer/utils.ts b/src/transfer/utils.ts index 50d2c0f2b5..7aa53e4042 100644 --- a/src/transfer/utils.ts +++ b/src/transfer/utils.ts @@ -87,6 +87,7 @@ function getTransferData( const list: Array = data.map((transferDataItem, index): TransferItemOption => { const labelKey = keys?.label || 'label'; const valueKey = keys?.value || 'value'; + const disabledKey = keys?.disabled || 'disabled'; if (isUndefined(transferDataItem[labelKey])) { throw new Error(`${labelKey} is not in DataOption ${JSON.stringify(transferDataItem)}`); } @@ -97,7 +98,7 @@ function getTransferData( label: transferDataItem[labelKey] as string, value: transferDataItem[valueKey], key: `key__value_${transferDataItem[valueKey]}_index_${index}`, - disabled: transferDataItem.disabled ?? false, + disabled: transferDataItem[disabledKey] ?? false, data: transferDataItem, }; if (isTreeMode && transferDataItem.children) { diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts index 178408800b..3eab44ff46 100644 --- a/src/tree-select/props.ts +++ b/src/tree-select/props.ts @@ -49,6 +49,10 @@ export default { defaultInputValue: { type: [String, Number] as PropType, }, + /** 用来定义 `value / label / children / disabled` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }` */ + keys: { + type: Object as PropType, + }, /** 是否正在加载数据 */ loading: Boolean, /** 远程加载时显示的文字,支持自定义。如加上超链接 */ diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md index faa2c8e319..c36e7cdb52 100644 --- a/src/tree-select/tree-select.en-US.md +++ b/src/tree-select/tree-select.en-US.md @@ -18,6 +18,7 @@ filterable | Boolean | false | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +keys | Object | - | Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N loadingText | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N max | Number | 0 | \- | N diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 6b3cdfae5d..01da3f2a9a 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -17,6 +17,8 @@ filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +keys | Object | - | 用来定义 `value / label / children / disabled` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | 是否正在加载数据 | N loadingText | String / Slot / Function | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N max | Number | 0 | 用于控制多选数量,值为 0 则不限制 | N diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index d3341bc7d2..88f81a9ced 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -339,6 +339,7 @@ export default defineComponent({ key={treeKey.value} value={[...checked.value]} hover + keys={props.keys} data={props.data} activable={!props.multiple} checkable={props.multiple} diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index bb622bde8e..8c28ea84cd 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -9,7 +9,7 @@ import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps } from '../select-input'; import { TagProps } from '../tag'; -import { TreeProps, TreeNodeModel } from '../tree'; +import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; import { SelectInputValueChangeContext } from '../select-input'; import { PopupVisibleChangeContext } from '../popup'; import { TNode, TreeOptionData } from '../common'; @@ -70,6 +70,10 @@ export interface TdTreeSelectProps` | N -defaultActived | Array | - | uncontrolled property。Typescript:`Array` | N allowFoldNodeOnFilter | Boolean | false | \- | N checkProps | Object | - | Typescript:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N checkStrictly | Boolean | false | \- | N @@ -24,25 +23,24 @@ expandMutex | Boolean | false | \- | N expandOnClickNode | Boolean | false | \- | N expandParent | Boolean | false | \- | N expanded | Array | [] | `v-model:expanded` is supported。Typescript:`Array` | N -defaultExpanded | Array | [] | uncontrolled property。Typescript:`Array` | N filter | Function | - | Typescript:`(node: TreeNodeModel) => boolean` | N -height | String / Number | - | table height | N +height | String / Number | - | The height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. The value should be a number and will automatically be converted to a pixel value. If the tree height is not fixed, it is recommended to use `maxHeight`. | N hover | Boolean | - | \- | N icon | Boolean / Slot / Function | true | Typescript:`boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -keys | Object | - | Typescript:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N +keys | Object | - | Typescript:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N label | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N lazy | Boolean | true | \- | N line | Boolean / Slot / Function | false | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N load | Function | - | Typescript:`(node: TreeNodeModel) => Promise>` | N -maxHeight | String / Number | - | table max height | N +maxHeight | String / Number | - | The max height of tree. Scrollbar will appear after the content is overflow. Examples: 100, '30%', '300'. | N operations | Slot / Function | - | Typescript:`TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N scroll | Object | - | lazy load and virtual scroll。Typescript:`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N transition | Boolean | true | \- | N value | Array | [] | `v-model` and `v-model:value` is supported。Typescript:`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript:`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N -valueMode | String | onlyLeaf | options:onlyLeaf/parentFirst/all | N -onActive | Function | | Typescript:`(value: Array, context: { node: TreeNodeModel }) => void`
| N -onChange | Function | | Typescript:`(value: Array, context: { node: TreeNodeModel }) => void`
| N +valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N +onActive | Function | | Typescript:`(value: Array, context: { node: TreeNodeModel; e?: MouseEvent; trigger: 'node-click' \| 'setItem' }) => void`
| N +onChange | Function | | Typescript:`(value: Array, context: { node: TreeNodeModel; e?: any; trigger: 'node-click' \| 'setItem' }) => void`
| N onClick | Function | | Typescript:`(context: { node: TreeNodeModel; e: MouseEvent }) => void`
| N onDragEnd | Function | | Typescript:`(context: { e: DragEvent; node: TreeNodeModel }) => void`
| N onDragLeave | Function | | Typescript:`(context: { e: DragEvent; node: TreeNodeModel }) => void`
| N @@ -143,4 +141,4 @@ bufferSize | Number | 20 | \- | N isFixedRowHeight | Boolean | false | \- | N rowHeight | Number | - | \- | N threshold | Number | 100 | \- | N -type | String | - | required。options:lazy/virtual | Y +type | String | - | required。options: lazy/virtual | Y diff --git a/src/tree/tree.md b/src/tree/tree.md index 6e7198f298..206eb0f756 100644 --- a/src/tree/tree.md +++ b/src/tree/tree.md @@ -8,7 +8,6 @@ activable | Boolean | false | 节点是否可高亮 | N activeMultiple | Boolean | false | 是否允许多个节点同时高亮 | N actived | Array | - | 高亮的节点值。支持语法糖 `v-model:actived`。TS 类型:`Array` | N -defaultActived | Array | - | 高亮的节点值。非受控属性。TS 类型:`Array` | N allowFoldNodeOnFilter | Boolean | false | 是否允许在过滤时节点折叠节点 | N checkProps | Object | - | 透传属性到 checkbox 组件。参考 checkbox 组件 API。TS 类型:`CheckboxProps`,[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N checkStrictly | Boolean | false | 父子节点选中状态不再关联,可各自选中或取消 | N @@ -24,25 +23,24 @@ expandMutex | Boolean | false | 同级别展开互斥,手风琴效果 | N expandOnClickNode | Boolean | false | 是否支持点击节点也能展开收起 | N expandParent | Boolean | false | 展开子节点时是否自动展开父节点 | N expanded | Array | [] | 展开的节点值。支持语法糖 `v-model:expanded`。TS 类型:`Array` | N -defaultExpanded | Array | [] | 展开的节点值。非受控属性。TS 类型:`Array` | N filter | Function | - | 节点过滤方法,只呈现返回值为 true 的节点,泛型 `T` 表示树节点 TS 类型。TS 类型:`(node: TreeNodeModel) => boolean` | N -height | String / Number | - | 表格高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定表格高度,建议使用 `maxHeight` | N +height | String / Number | - | 树的高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定树的高度,建议使用 `maxHeight` | N hover | Boolean | - | 节点是否有悬浮状态 | N icon | Boolean / Slot / Function | true | 节点图标,可自定义。TS 类型:`boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。TS 类型:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N +keys | Object | - | 用来定义 `value / label / children / disabled` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。TS 类型:`TreeKeysType` `interface TreeKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N label | String / Boolean / Slot / Function | true | 自定义节点内容,值为 `false` 不显示,值为 `true` 显示默认 label,值为字符串直接输出该字符串。泛型 `T` 表示树节点 TS 类型。
如果期望只有点击复选框才选中,而点击节点不选中,可以使用 `label` 自定义节点,然后加上点击事件 `e.preventDefault()`,通过调整自定义节点的宽度和高度决定禁止点击选中的范围。TS 类型:`string \| boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N lazy | Boolean | true | 延迟加载 children 为 true 的节点的子节点数据,即使 expandAll 被设置为 true,也同样延迟加载 | N line | Boolean / Slot / Function | false | 连接线。值为 false 不显示连接线;值为 true 显示默认连接线;值类型为 Function 表示自定义连接线。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N load | Function | - | 加载子数据的方法,在展开节点时调用(仅当节点 children 为 true 时生效),泛型 `T` 表示树节点 TS 类型。TS 类型:`(node: TreeNodeModel) => Promise>` | N -maxHeight | String / Number | - | 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px | N +maxHeight | String / Number | - | 树的最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px | N operations | Slot / Function | - | 自定义节点操作项,泛型 `T` 表示树节点 TS 类型。TS 类型:`TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N transition | Boolean | true | 节点展开折叠时是否使用过渡动画 | N value | Array | [] | 选中值(组件为可选状态时)。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N defaultValue | Array | [] | 选中值(组件为可选状态时)。非受控属性。TS 类型:`Array` `type TreeNodeValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree/type.ts) | N valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面;parentFirst 表示当子节点全部选中时,仅父节点在选中值里面;onlyLeaft 表示无论什么情况,选中值仅呈现叶子节点。可选项:onlyLeaf/parentFirst/all | N -onActive | Function | | TS 类型:`(value: Array, context: { node: TreeNodeModel }) => void`
节点激活时触发,泛型 `T` 表示树节点 TS 类型 | N -onChange | Function | | TS 类型:`(value: Array, context: { node: TreeNodeModel }) => void`
节点选中状态变化时触发,context.node 表示当前变化的选项,泛型 `T` 表示树节点 TS 类型 | N +onActive | Function | | TS 类型:`(value: Array, context: { node: TreeNodeModel; e?: MouseEvent; trigger: 'node-click' \| 'setItem' }) => void`
节点激活时触发,泛型 `T` 表示树节点 TS 类型 | N +onChange | Function | | TS 类型:`(value: Array, context: { node: TreeNodeModel; e?: any; trigger: 'node-click' \| 'setItem' }) => void`
节点选中状态变化时触发,context.node 表示当前变化的选项,泛型 `T` 表示树节点 TS 类型 | N onClick | Function | | TS 类型:`(context: { node: TreeNodeModel; e: MouseEvent }) => void`
节点点击时触发,泛型 `T` 表示树节点 TS 类型 | N onDragEnd | Function | | TS 类型:`(context: { e: DragEvent; node: TreeNodeModel }) => void`
节点结束拖拽时触发,泛型 `T` 表示树节点 TS 类型 | N onDragLeave | Function | | TS 类型:`(context: { e: DragEvent; node: TreeNodeModel }) => void`
节点拖拽时离开目标元素时触发,泛型 `T` 表示树节点 TS 类型 | N