feat(tree, tree-select): add nodeKey prop (#998)

* feat(tree,tree-select): add nodeKey prop

* fix code

* docs: format

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-cascader` add `onUpdateValue` prop.
 - `n-auto-complete` add `onUpdateValue` prop.
 - `n-data-table`'s column's `renderFilterMenu` add `hide` params.
+- `n-tree` & `n-tree-select` add `node-key` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,7 @@
 - `n-cascader` 新增 `onUpdateValue` 方法
 - `n-auto-complete` 新增 `onUpdateValue` 方法
 - `n-data-table` 的列的 `renderFilterMenu` 新增 hide 参数
+- `n-tree` 和 `n-tree-select` 新增 `node-key` 属性
 
 ### Fixes
 

src/tree-select/demos/enUS/index.demo-entry.md

@@ -31,6 +31,7 @@ debug
 | filter | `(pattern: string, option: TreeSelectOption) => boolean` | - | Filter function. |
 | max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count to be shown in multiple mode. Set to `'responsive'` will keep all tags in the same row. |
 | multiple | `boolean` | `false` | Whether to support multiple select. |
+| node-key | `string` | `undefined` | Replace the key in `TreeSelectOption`. |
 | options | `TreeSelectOption[]` | `[]` | Options. |
 | placeholder | `string` | `'Please Select'` | Placeholder. |
 | separator | `string` | `' / '` | Option value separator. |

src/tree-select/demos/zhCN/index.demo-entry.md

@@ -32,6 +32,7 @@ debug
 | leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选时最多直接显示多少选项，设为 `'responsive'` 会保证最多一行 |
 | multiple | `boolean` | `false` | 是否支持多选 |
+| node-key | `string` | `undefined` | 替代 `TreeSelectOption` 中的 key |
 | options | `TreeSelectOption[]` | `[]` | 选项 |
 | placeholder | `string` | `'请选择'` | 占位信息 |
 | separator | `string` | `' / '` | 数据分隔符 |

src/tree-select/src/TreeSelect.tsx

@@ -24,7 +24,7 @@ import { clickoutside } from 'vdirs'
 import { createTreeMate } from 'treemate'
 import { Key, InternalTreeInst } from '../../tree/src/interface'
 import type { SelectBaseOption } from '../../select/src/interface'
-import { treeMateOptions, treeSharedProps } from '../../tree/src/Tree'
+import { createTreeMateOptions, treeSharedProps } from '../../tree/src/Tree'
 import {
   NInternalSelection,
   InternalSelectionInst,
@@ -61,6 +61,7 @@ const props = {
     type: Boolean,
     default: true
   },
+  nodeKey: String,
   cascade: Boolean,
   checkable: Boolean,
   clearable: Boolean,
@@ -177,12 +178,15 @@ export default defineComponent({
     })
     // used to resolve selected options
     const dataTreeMateRef = computed(() =>
-      createTreeMate<TreeSelectOption>(props.options, treeMateOptions)
+      createTreeMate<TreeSelectOption>(
+        props.options,
+        createTreeMateOptions(props.nodeKey)
+      )
     )
     const displayTreeMateRef = computed(() =>
       createTreeMate<TreeSelectOption>(
         filteredTreeInfoRef.value.filteredTree,
-        treeMateOptions
+        createTreeMateOptions(props.nodeKey)
       )
     )
     const { value: initMergedValue } = mergedValueRef

src/tree-select/src/utils.ts

@@ -8,7 +8,7 @@ export function treeOption2SelectOption (
   const { rawNode } = tmNode
   return {
     ...rawNode,
-    value: rawNode.key
+    value: tmNode.key
   }
 }
 
@@ -20,7 +20,7 @@ export function treeOption2SelectOptionWithPath (
   const { rawNode } = tmNode
   return {
     ...rawNode,
-    value: rawNode.key,
+    value: tmNode.key,
     label: path.map((v) => v.rawNode.label).join(separator)
   }
 }

src/tree/demos/enUS/index.demo-entry.md

@@ -43,6 +43,7 @@ batch-render
 | filter | `(node: TreeOption) => boolean` | `undefined` | A simple string based filter. |
 | leaf-only | `boolean` | `false` | Whether to open or not, only the bottom tree node is optional. |
 | multiple | `boolean` | `false` | Whether to allow multiple selection of nodes. |
+| node-key | `string` | `undefined` | Replace the key in `TreeOption`. |
 | on-load | `(node: TreeOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. |
 | pattern | `string` | `''` | What to search by default. |
 | remote | `boolean` | `false` | Whether to load nodes async. It should work with `on-load`. |

src/tree/demos/zhCN/index.demo-entry.md

@@ -43,6 +43,7 @@ batch-render
 | filter | `(node: TreeOption) => boolean` | `undefined` | 一个简单的字符串过滤算法 |
 | leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | multiple | `boolean` | `false` | 是否允许节点多选 |
+| node-key | `string` | `undefined` | 替代 `TreeOption` 中的 key |
 | on-load | `(node: TreeOption) => Promise<void>` | `undefined` | 异步加载数据的回调函数 |
 | pattern | `string` | `''` | 默认搜索的内容 |
 | remote | `boolean` | `false` | 是否异步获取选项，和 `onLoad` 配合 |

src/tree/src/Tree.tsx

@@ -12,7 +12,13 @@ import {
   VNode,
   nextTick
 } from 'vue'
-import { createTreeMate, flatten, createIndexGetter, TreeMate } from 'treemate'
+import {
+  createTreeMate,
+  flatten,
+  createIndexGetter,
+  TreeMate,
+  TreeMateOptions
+} from 'treemate'
 import { useMergedState } from 'vooks'
 import { VirtualListInst, VVirtualList } from 'vueuc'
 import { getPadding } from 'seemly'
@@ -55,9 +61,16 @@ import style from './styles/index.cssr'
 
 const ITEM_SIZE = 30 // 24 + 3 + 3
 
-export const treeMateOptions = {
+export function createTreeMateOptions<T> (
-  getDisabled (node: TreeOption) {
+  nodeKey: string | undefined
-    return !!(node.disabled || node.checkboxDisabled)
+): TreeMateOptions<T, T, T> {
+  return {
+    getKey (node: T) {
+      return nodeKey ? (node as any)[nodeKey] : (node as any).key
+    },
+    getDisabled (node: T) {
+      return !!((node as any).disabled || (node as any).checkboxDisabled)
+    }
   }
 }
 
@@ -94,6 +107,7 @@ const treeProps = {
     type: Boolean,
     default: true
   },
+  nodeKey: String,
   checkable: Boolean,
   draggable: Boolean,
   blockNode: Boolean,
@@ -215,7 +229,12 @@ export default defineComponent({
     // We don't expect data source to change so we just determine it once
     const displayTreeMateRef = props.internalDisplayTreeMate
       ? toRef(props, 'internalDisplayTreeMate')
-      : computed(() => createTreeMate(props.data, treeMateOptions))
+      : computed(() =>
+        createTreeMate<TreeOption>(
+          props.data,
+          createTreeMateOptions(props.nodeKey)
+        )
+      )
     const dataTreeMateRef = props.internalDataTreeMate
       ? toRef(props, 'internalDataTreeMate')
       : displayTreeMateRef