diff --git a/src/_common b/src/_common index c1eeb3254..e71bd2161 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 180e42802..94cf573a7 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/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/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N +keys | Object | - | Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N lazy | Boolean | true | \- | N load | Function | - | Typescript:`(node: TreeNodeModel) => Promise>` | N @@ -29,23 +30,24 @@ options | Array | [] | Typescript:`Array` | N placeholder | String | undefined | \- | N popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | \- | N +defaultPopupVisible | Boolean | - | uncontrolled property | N 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/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/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/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/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/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/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` is supported。Typescript:`CascaderValue` `type CascaderValue = string \| number \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/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 aaa5cb166..3aa150ae5 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/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/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N +keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/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/cascader.tsx b/src/cascader/cascader.tsx index 4eff413cb..f1ca0a0da 100644 --- a/src/cascader/cascader.tsx +++ b/src/cascader/cascader.tsx @@ -11,7 +11,7 @@ import props from './props'; import { useCascaderContext } from './hooks'; import { - CascaderValue, CascaderKeysType, TdSelectInputProps, TdCascaderProps, + CascaderValue, TreeKeysType, TdSelectInputProps, TdCascaderProps, } from './interface'; import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig'; import { PopupVisibleChangeContext } from '../popup'; @@ -102,7 +102,7 @@ export default defineComponent({ const renderCollapsedItems = () => { const cascaderValue = this.innerValue || []; - const keys = (this.keys as CascaderKeysType) || DEFAULT_KEYS; + const keys = (this.keys as TreeKeysType) || DEFAULT_KEYS; const value = Array.isArray(cascaderValue) ? cascaderValue : [cascaderValue]; const cascaderOptions = value.map((item) => { const tmpValue = typeof item === 'object' ? item[keys.value] : item; diff --git a/src/cascader/interface.tsx b/src/cascader/interface.tsx index 0be55c8c3..4b9c3286b 100644 --- a/src/cascader/interface.tsx +++ b/src/cascader/interface.tsx @@ -4,6 +4,8 @@ import TreeStore from '../_common/js/tree/tree-store'; import TreeNode from '../_common/js/tree/tree-node'; import { TreeNodeModel, TreeNodeValue } from '../_common/js/tree/types'; +export { TreeKeysType } from '../common'; + export * from './type'; export interface CascaderContextType extends Pick< diff --git a/src/cascader/props.ts b/src/cascader/props.ts index 8015853fe..a81b68a65 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 528021f3d..f370bea29 100644 --- a/src/cascader/type.ts +++ b/src/cascader/type.ts @@ -12,13 +12,18 @@ import { TagInputProps } from '../tag-input'; import { TagProps } from '../tag'; import { TreeNodeModel } from '../tree'; import { PopupVisibleChangeContext } from '../popup'; -import { TNode, TreeOptionData, SizeEnum } from '../common'; +import { TNode, TreeOptionData, SizeEnum, TreeKeysType } from '../common'; export interface TdCascaderProps { /** * 自动聚焦 */ autofocus?: boolean; + /** + * 无边框模式 + * @default false + */ + borderless?: boolean; /** * 参考 checkbox 组件 API */ @@ -59,9 +64,9 @@ export interface TdCascaderProps) => void; } -export interface CascaderKeysType { - value?: string; - label?: string; - children?: string | boolean; -} - export type CascaderValue = string | number | T | Array>; export interface CascaderChangeContext { diff --git a/src/common.ts b/src/common.ts index e8f794152..5b27058c1 100644 --- a/src/common.ts +++ b/src/common.ts @@ -69,6 +69,11 @@ export type CSSSelector = string; export interface KeysType { value?: string; label?: string; + disabled?: string; +} + +export interface TreeKeysType extends KeysType { + children?: string; } export interface HTMLElementAttributes { diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts index e121ae407..e451d8695 100644 --- a/src/select/hooks/useSelectOptions.ts +++ b/src/select/hooks/useSelectOptions.ts @@ -9,8 +9,9 @@ import { import { VNode } from 'vue'; import get from 'lodash/get'; import { - TdSelectProps, SelectKeysType, TdOptionProps, SelectOptionGroup, SelectValue, + TdSelectProps, TdOptionProps, SelectOptionGroup, SelectValue, } from '../type'; +import { KeysType } from '../../common'; type UniOption = (TdOptionProps | SelectOptionGroup) & { index?: number; @@ -20,7 +21,7 @@ type UniOption = (TdOptionProps | SelectOptionGroup) & { export default function useSelectOptions( props: TdSelectProps, instance: ComponentInternalInstance, - keys: Ref, + keys: Ref, ) { // 内部 options 记录 const options = ref([]); @@ -34,12 +35,13 @@ export default function useSelectOptions( // 解析 props 中 options 字段的配置,以此初始化 innerOptions 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 += 1; return res; diff --git a/src/select/option-props.ts b/src/select/option-props.ts index e3dd5e02a..ebcf258fd 100644 --- a/src/select/option-props.ts +++ b/src/select/option-props.ts @@ -32,6 +32,6 @@ export default { }, /** 选项值 */ value: { - type: [String, Number, Boolean] as PropType, + type: [String, Number] as PropType, }, }; diff --git a/src/select/props.ts b/src/select/props.ts index c82d6c304..5190389a1 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 6f4bf3016..5a5b3d848 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/tree/develop/src/select/type.ts) | N inputValue | String / Number | - | input value。`.sync` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +keys | Object | - | alias option field。Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/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 | 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/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/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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` is supported。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/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/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/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/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/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 daf4c5dca..310aea378 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/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 -keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | 是否为加载状态 | N loadingText | String / Slot / Function | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/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/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 +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' \| '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/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/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/type.ts b/src/select/type.ts index bc702011e..1b43f3dc1 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 { PlainObject, TNode, SizeEnum, InfinityScroll } from '../common'; +import { PlainObject, TNode, SizeEnum, KeysType, InfinityScroll } from '../common'; export interface TdSelectProps { /** @@ -73,9 +73,9 @@ export interface TdSelectProps { */ defaultInputValue?: InputValue; /** - * 用来定义 value / label 在 `options` 中对应的字段别名 + * 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ - keys?: SelectKeysType; + keys?: KeysType; /** * 左侧文本 */ @@ -299,14 +299,9 @@ export interface TdOptionGroupProps { label?: string; } -export interface SelectKeysType { - value?: string; - label?: string; -} - export type SelectValue = string | number | boolean | T | Array>; -export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; +export type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck' | 'default'; export interface SelectRemoveContext { value: string | number; diff --git a/src/transfer/props.ts b/src/transfer/props.ts index 5b8eca7d9..894786991 100644 --- a/src/transfer/props.ts +++ b/src/transfer/props.ts @@ -49,7 +49,7 @@ export default { footer: { type: [Array, Function] as PropType, }, - /** 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ + /** 用来定义 value / label / disabled 在 `data` 中对应的字段别名,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ keys: { type: Object as PropType, }, diff --git a/src/transfer/transfer.en-US.md b/src/transfer/transfer.en-US.md index 663537245..953a88f53 100644 --- a/src/transfer/transfer.en-US.md +++ b/src/transfer/transfer.en-US.md @@ -10,10 +10,10 @@ checked | Array | [] | `.sync` is supported。Typescript:`Array defaultChecked | Array | [] | uncontrolled property。Typescript:`Array` | N data | Array | [] | Typescript:`Array` | N direction | String | both | options: left/right/both | N -disabled | Boolean / Array | false | Typescript:`boolean \| Array` | N +disabled | Boolean / Array | - | Typescript:`boolean \| Array` | N empty | String / Array / Slot / Function | '' | Typescript:`EmptyType \| Array \| TNode` `type EmptyType = string \| TNode `。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N footer | Array / Slot / Function | - | Typescript:`Array \| TNode<{ type: TransferListType }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -keys | Object | - | Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +keys | Object | - | alias field name in data。Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N operation | Array / Slot / Function | - | Typescript:`Array \| TNode<{ direction: 'left' \| 'right' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N pagination | Object / Array | - | Typescript:`PaginationProps \| Array`,[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N search | Boolean / Object / Array | false | Typescript:`SearchOption \| Array` `type SearchOption = boolean \| InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N diff --git a/src/transfer/transfer.md b/src/transfer/transfer.md index 6ac4a6f66..ff6458a56 100644 --- a/src/transfer/transfer.md +++ b/src/transfer/transfer.md @@ -10,10 +10,10 @@ checked | Array | [] | 数据列表选中项。支持语法糖 `.sync`。TS 类 defaultChecked | Array | [] | 数据列表选中项。非受控属性。TS 类型:`Array` | N data | Array | [] | 全量数据。TS 类型:`Array` | N direction | String | both | 穿梭框可操作方向。可选项:left/right/both | N -disabled | Boolean / Array | false | 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[true, false] 或者 true。TS 类型:`boolean \| Array` | N +disabled | Boolean / Array | - | 禁用全部操作:搜索、选中、移动、分页等。[源列表, 目标列表],示例:[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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/transfer/type.ts) | N footer | Array / Slot / Function | - | 穿梭框底部内容。TS 类型:`Array \| TNode<{ type: TransferListType }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -keys | Object | - | 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +keys | Object | - | 用来定义 value / label / disabled 在 `data` 中对应的字段别名,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/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/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/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/tree/develop/src/transfer/type.ts) | N diff --git a/src/transfer/type.ts b/src/transfer/type.ts index 9212bf130..b87f7bff1 100644 --- a/src/transfer/type.ts +++ b/src/transfer/type.ts @@ -48,7 +48,7 @@ export interface TdTransferProps { */ footer?: Array | TNode<{ type: TransferListType }>; /** - * 用来定义选项文本和选项值字段,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 + * 用来定义 value / label / disabled 在 `data` 中对应的字段别名,示例:`{ label: 'text', value: 'id' }`,表示选项文本取 `text` 字段,选项值取 `id` 字段 */ keys?: KeysType; /** diff --git a/src/transfer/utils.ts b/src/transfer/utils.ts index 928755287..d5aded649 100644 --- a/src/transfer/utils.ts +++ b/src/transfer/utils.ts @@ -92,6 +92,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 (transferDataItem[labelKey] === undefined) { throw `${labelKey} is not in DataOption ${JSON.stringify(transferDataItem)}`; } @@ -102,7 +103,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/type.ts b/src/tree-select/type.ts index 80c1f76b4..166cd67f6 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -9,9 +9,9 @@ import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext } from '../select-input'; import { TagProps } from '../tag'; -import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; +import { TreeProps, TreeNodeModel } from '../tree'; import { PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TreeOptionData } from '../common'; +import { TNode, TreeOptionData, TreeKeysType } from '../common'; export interface TdTreeSelectProps< DataOption extends TreeOptionData = TreeOptionData, diff --git a/src/tree-select/useTreeSelect.ts b/src/tree-select/useTreeSelect.ts index c3d594175..b542586b4 100644 --- a/src/tree-select/useTreeSelect.ts +++ b/src/tree-select/useTreeSelect.ts @@ -3,12 +3,10 @@ import { } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type'; -import { - TreeProps, TreeInstanceFunctions, TreeKeysType, TreeNodeValue, -} from '../tree'; +import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree'; import { usePrefixClass, useConfig } from '../hooks/useConfig'; import useFormDisabled from '../hooks/useFormDisabled'; -import { TreeOptionData } from '../common'; +import { TreeOptionData, TreeKeysType } from '../common'; import useVModel from '../hooks/useVModel'; import useDefaultValue from '../hooks/useDefaultValue'; import { SelectInputProps } from '../select-input'; diff --git a/src/tree-select/utils.ts b/src/tree-select/utils.ts index 3a83abed1..7235c98e6 100644 --- a/src/tree-select/utils.ts +++ b/src/tree-select/utils.ts @@ -1,5 +1,4 @@ -import { TreeKeysType } from '../tree'; -import { TreeOptionData } from '../common'; +import { TreeOptionData, TreeKeysType } from '../common'; export function getNodeDataByValue( values: Array, diff --git a/src/tree/props.ts b/src/tree/props.ts index 83dc60b00..6ec602734 100644 --- a/src/tree/props.ts +++ b/src/tree/props.ts @@ -76,7 +76,7 @@ export default { filter: { type: Function as PropType, }, - /** 表格高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定表格高度,建议使用 `maxHeight` */ + /** 树的高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定树的高度,建议使用 `maxHeight` */ height: { type: [String, Number] as PropType, }, @@ -87,7 +87,7 @@ export default { type: [Boolean, Function] as PropType, default: true, }, - /** 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }` */ + /** 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。其中,disabled 待开发。 */ keys: { type: Object as PropType, }, @@ -110,7 +110,7 @@ export default { load: { type: Function as PropType, }, - /** 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px */ + /** 树的最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px */ maxHeight: { type: [String, Number] as PropType, }, diff --git a/src/tree/tree.en-US.md b/src/tree/tree.en-US.md index a636b3f85..6fe02c6c3 100644 --- a/src/tree/tree.en-US.md +++ b/src/tree/tree.en-US.md @@ -24,23 +24,22 @@ expandMutex | Boolean | false | \- | N expandOnClickNode | Boolean | false | \- | N expandParent | Boolean | false | \- | N expanded | Array | [] | `.sync` 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/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/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree/type.ts) | N +keys | Object | - | alias field name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Boolean / Slot / Function | true | Typescript:`string \| boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/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/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/blob/develop/src/common.ts) | N transition | Boolean | true | \- | N value | Array | [] | `v-model` is supported。Typescript:`Array` `type TreeNodeValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/tree/type.ts) | N -valueMode | String | onlyLeaf | options:onlyLeaf/parentFirst/all | 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 @@ -142,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 a7337d345..2d97133e1 100644 --- a/src/tree/tree.md +++ b/src/tree/tree.md @@ -26,15 +26,15 @@ expandParent | Boolean | false | 展开子节点时是否自动展开父节点 | expanded | Array | [] | 展开的节点值。支持语法糖 `.sync`。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/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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree/type.ts) | N +keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。其中,disabled 待开发。。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.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/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/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/blob/develop/src/common.ts) | N scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N transition | Boolean | true | 节点展开折叠时是否使用过渡动画 | N diff --git a/src/tree/type.ts b/src/tree/type.ts index bd007cb15..fcd3c6db4 100644 --- a/src/tree/type.ts +++ b/src/tree/type.ts @@ -5,7 +5,7 @@ * */ import { CheckboxProps } from '../checkbox'; -import { TNode, TreeOptionData, TScroll } from '../common'; +import { TNode, TreeOptionData, TreeKeysType, TScroll } from '../common'; export interface TdTreeProps { /** @@ -108,7 +108,7 @@ export interface TdTreeProps { */ filter?: (node: TreeNodeModel) => boolean; /** - * 表格高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定表格高度,建议使用 `maxHeight` + * 树的高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px。如果不是绝对固定树的高度,建议使用 `maxHeight` */ height?: string | number; /** @@ -121,7 +121,7 @@ export interface TdTreeProps { */ icon?: boolean | TNode>; /** - * 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }` + * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label 'name', children: 'list' }`。其中,disabled 待开发。 */ keys?: TreeKeysType; /** @@ -144,7 +144,7 @@ export interface TdTreeProps { */ load?: (node: TreeNodeModel) => Promise>; /** - * 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px + * 树的最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px */ maxHeight?: string | number; /** @@ -309,6 +309,11 @@ export interface TreeNodeState { * @default false */ disabled?: boolean; + /** + * 该节点是否允许被拖动,当树本身开启时,默认允许 + * @default true + */ + draggable?: boolean; /** * 子节点是否互斥展开 * @default false @@ -436,10 +441,4 @@ export interface TreeNodeModel extend setData: (data: T) => void; } -export interface TreeKeysType { - value?: string; - label?: string; - children?: string; -} - export type TreeNodeValue = string | number;