feat: tree-select add keys api

Tencent · Aug 14, 2023 · 267ef6d · 267ef6d
1 parent a037427
commit 267ef6d
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts
@@ -49,6 +49,10 @@ export default {
   defaultInputValue: {
     type: [String, Number] as PropType<TdTreeSelectProps['defaultInputValue']>,
   },
+  /** 用来定义 `value / label / children / disabled` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }` */
+  keys: {
+    type: Object as PropType<TdTreeSelectProps['keys']>,
+  },
   /** 是否正在加载数据 */
   loading: Boolean,
   /** 远程加载时显示的文字，支持自定义。如加上超链接 */

diff --git 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
@@ -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
@@ -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
@@ -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<DataOption extends TreeOptionData = TreeOptio
    * 输入框的值，非受控属性
    */
   defaultInputValue?: InputValue;
+  /**
+   * 用来定义 `value / label / children / disabled` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`
+   */
+  keys?: TreeKeysType;
   /**
    * 是否正在加载数据
    * @default false