feat(tree, tree-select): add children-field prop (#1040)

* feat(tree&tree-select): add children-field prop * chore: update docs & deps
2025-03-01 13:36:55 +08:00 · 2021-09-03 00:42:47 +08:00 · 2021-09-03 00:42:47 +08:00 · bbddd13084
commit bbddd13084
parent 69a30f10fe
13 changed files with 35 additions and 17 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -14,6 +14,7 @@
 - `n-data-table`'s column's `renderFilterMenu` add `hide` params.
 - `n-tree` & `n-tree-select` add `key-field` prop.
 - `n-tree` & `n-tree-select` add `label-field` prop.
+- `n-tree` & `n-tree-select` add `children-field` prop.
 - `n-dropdown` option add `props` prop, closes [#813](https://github.com/TuSimple/naive-ui/issues/813).

 ### Fixes
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -14,6 +14,7 @@
 - `n-data-table` 的列的 `renderFilterMenu` 新增 hide 参数
 - `n-tree` 和 `n-tree-select` 新增 `key-field` 属性
 - `n-tree` 和 `n-tree-select` 新增 `label-field` 属性
+- `n-tree` 和 `n-tree-select` 新增 `children-field` 属性
 - `n-dropdown` 选项新增 `props` 属性，关闭 [#813](https://github.com/TuSimple/naive-ui/issues/813)

 ### Fixes
--- a/package.json
+++ b/package.json
@ -127,7 +127,7 @@
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "seemly": "^0.3.1",
-    "treemate": "^0.3.0",
+    "treemate": "^0.3.3",
    "vdirs": "^0.1.4",
    "vfonts": "^0.1.0",
    "vooks": "^0.2.6",
--- a/src/tree-select/demos/enUS/custom-field.demo.md
+++ b/src/tree-select/demos/enUS/custom-field.demo.md
@ -8,6 +8,7 @@ Various data would come from backend.
  default-value="Drive My Car"
  label-field="whateverLabel"
  key-field="whateverKey"
+  children-field="whateverChildren"
 />
 ```

@ -21,7 +22,7 @@ export default defineComponent({
        {
          whateverLabel: 'Rubber Soul',
          whateverKey: 'Rubber Soul',
-          children: [
+          whateverChildren: [
            {
              whateverLabel:
                "Everybody's Got Something to Hide Except Me and My Monkey",
@ -84,7 +85,7 @@ export default defineComponent({
        {
          whateverLabel: 'Let It Be',
          whateverKey: 'Let It Be Album',
-          children: [
+          whateverChildren: [
            {
              whateverLabel: 'Two Of Us',
              whateverKey: 'Two Of Us'
--- a/src/tree-select/demos/enUS/index.demo-entry.md
+++ b/src/tree-select/demos/enUS/index.demo-entry.md
@ -21,6 +21,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | Whether to do cascade check when use checkboxes. |
 | checkable | `boolean` | `false` | Whether to use checkbox to select value. |
+| children-field | `string` | `'children'` | The children field in `TreeSelectOption`. |
 | clearable | `boolean` | `false` | Whether it's clearable. |
 | consistent-menu-width | `boolean` | `true` | Whether to make menu's width consistent with input. Set to `true` will disable virtual scroll. |
 | default-value | `string \| number \| Array<string \| number> \| null` | `null` | Selected key (or keys when multiple) by default. |
@ -30,8 +31,8 @@ debug
 | expanded-keys | `Array<string \| number>` | `undefined` | Expanded keys. |
 | filterable | `boolean` | `false` | Whether the tree select is disabled. |
 | filter | `(pattern: string, option: TreeSelectOption) => boolean` | - | Filter function. |
-| key-field | `string` | `'key'` | The key field in `TreeOption`. |
-| label-field | `string` | `'label'` | The the label field in `TreeOption`. |
+| key-field | `string` | `'key'` | The key field in `TreeSelectOption`. |
+| label-field | `string` | `'label'` | The label field in `TreeSelectOption`. |
 | 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. |
 | options | `TreeSelectOption[]` | `[]` | Options. |
--- a/src/tree-select/demos/zhCN/custom-field.demo.md
+++ b/src/tree-select/demos/zhCN/custom-field.demo.md
@ -8,6 +8,7 @@
  default-value="Drive My Car"
  label-field="whateverLabel"
  key-field="whateverKey"
+  children-field="whateverChildren"
 />
 ```

@ -21,7 +22,7 @@ export default defineComponent({
        {
          whateverLabel: 'Rubber Soul',
          whateverKey: 'Rubber Soul',
-          children: [
+          whateverChildren: [
            {
              whateverLabel:
                "Everybody's Got Something to Hide Except Me and My Monkey",
@ -84,7 +85,7 @@ export default defineComponent({
        {
          whateverLabel: 'Let It Be',
          whateverKey: 'Let It Be Album',
-          children: [
+          whateverChildren: [
            {
              whateverLabel: 'Two Of Us',
              whateverKey: 'Two Of Us'
--- a/src/tree-select/demos/zhCN/index.demo-entry.md
+++ b/src/tree-select/demos/zhCN/index.demo-entry.md
@ -21,6 +21,7 @@ debug
 | --- | --- | --- | --- |
 | cascade | `boolean` | `false` | 使用 checkbox 进行多选时是否级联 |
 | checkable | `boolean` | `false` | 是否使用 checkbox 进行选择 |
+| children-field | `string` | `'children'` | 替代 `TreeSelectOption` 中的 children 字段名 |
 | clearable | `boolean` | `false` | 是否可清除 |
 | consistent-menu-width | `boolean` | `true` | 是否使菜单宽度和输入框一致，打开会禁用虚拟滚动 |
 | default-value | `string \| number \| Array<string \| number> \| null` | `null` | 默认选中的 key |
@ -30,8 +31,8 @@ debug
 | expanded-keys | `Array<string \| number>` | `undefined` | 展开节点的 key |
 | filterable | `boolean` | `false` | 是否可过滤 |
 | filter | `(pattern: string, option: TreeSelectOption) => boolean` | - | 过滤器函数 |
-| key-field | `string` | `'key'` | `TreeOption` 中的 key 字段名 |
-| label-field | `string` | `'label'` | 替代 `TreeOption` 中的 label 字段名 |
+| key-field | `string` | `'key'` | 替代 `TreeSelectOption` 中的 key 字段名 |
+| label-field | `string` | `'label'` | 替代 `TreeSelectOption` 中的 label 字段名 |
 | leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选时最多直接显示多少选项，设为 `'responsive'` 会保证最多一行 |
 | multiple | `boolean` | `false` | 是否支持多选 |
--- a/src/tree-select/src/TreeSelect.tsx
+++ b/src/tree-select/src/TreeSelect.tsx
@ -195,13 +195,13 @@ export default defineComponent({
    const dataTreeMateRef = computed(() =>
      createTreeMate<TreeSelectOption>(
        props.options,
-        createTreeMateOptions(props.keyField)
+        createTreeMateOptions(props.keyField, props.childrenField)
      )
    )
    const displayTreeMateRef = computed(() =>
      createTreeMate<TreeSelectOption>(
        filteredTreeInfoRef.value.filteredTree,
-        createTreeMateOptions(props.keyField)
+        createTreeMateOptions(props.keyField, props.childrenField)
      )
    )
    const { value: initMergedValue } = mergedValueRef
--- a/src/tree/demos/enUS/custom-field.demo.md
+++ b/src/tree/demos/enUS/custom-field.demo.md
@ -9,6 +9,7 @@ Various data would come from backend.
  :default-expanded-keys="defaultExpandedKeys"
  key-field="whateverKey"
  label-field="whateverLabel"
+  children-field="whateverChildren"
  selectable
 />
 ```
@ -23,7 +24,7 @@ function createData (level = 4, baseKey = '') {
    return {
      whateverLabel: createLabel(level),
      whateverKey: key,
-      children: createData(level - 1, key)
+      whateverChildren: createData(level - 1, key)
    }
  })
 }
--- a/src/tree/demos/enUS/index.demo-entry.md
+++ b/src/tree/demos/enUS/index.demo-entry.md
@ -32,6 +32,7 @@ batch-render
 | cancelable | `boolean` | `true` | Whether node's select status can be cancelled. |
 | cascade | `boolean` | `false` | Whether to cascade checkboxes. |
 | checkable | `boolean` | `false` | Whether to display the selection box, you need to set `cascade` to `true`. |
+| children-field | `string` | `'children'` | The children field in `TreeOption`. |
 | checked-keys | `Array<string \| number>` | `undefined` | If set, checked status will work in controlled manner. |
 | data | `Array<TreeOption>` | `[]` | The node data of the tree. Reset `data` will cause clearing of some uncontrolled status. If you need to modify data, you'd better make tree work in a controlled manner. |
 | default-checked-keys | `Array<string \| number>` | `[]` | Multiple options selected by default. |
@ -43,7 +44,7 @@ batch-render
 | expanded-keys | `Array<string \| number>` | `undefined` | If set, expanded status will work in controlled manner. |
 | filter | `(node: TreeOption) => boolean` | `undefined` | A simple string based filter. |
 | key-field | `string` | `'key'` | The key field in `TreeOption`. |
-| label-field | `string` | `'label'` | The the label field in `TreeOption`. |
+| label-field | `string` | `'label'` | The label field in `TreeOption`. |
 | 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. |
 | on-load | `(node: TreeOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. |
--- a/src/tree/demos/zhCN/custom-field.demo.md
+++ b/src/tree/demos/zhCN/custom-field.demo.md
@ -9,6 +9,7 @@
  :default-expanded-keys="defaultExpandedKeys"
  key-field="whateverKey"
  label-field="whateverLabel"
+  children-field="whateverChildren"
  selectable
 />
 ```
@ -23,7 +24,7 @@ function createData (level = 4, baseKey = '') {
    return {
      whateverLabel: createLabel(level),
      whateverKey: key,
-      children: createData(level - 1, key)
+      whateverChildren: createData(level - 1, key)
    }
  })
 }
--- a/src/tree/demos/zhCN/index.demo-entry.md
+++ b/src/tree/demos/zhCN/index.demo-entry.md
@ -32,6 +32,7 @@ batch-render
 | cancelable | `boolean` | `true` | 选中之后是否允许取消 |
 | cascade | `boolean` | `false` | 是否关联选项 |
 | checkable | `boolean` | `false` | 是否显示选择框，需要将 `cascade` 设置为 `true` |
+| children-field | `string` | `'children'` | 替代 `TreeOption` 中的 children 字段名 |
 | checked-keys | `Array<string \| number>` | `undefined` | 如果设定则 `checked` 状态受控 |
 | data | `Array<TreeOption>` | `[]` | 树的节点数据。重新设置 `data` 会将一些非受控状态清空，如果你需要在使用中改动 `data`，最好以受控的方式控制树 |
 | default-checked-keys | `Array<string \| number>` | `[]` | 默认选中的多选项 |
@ -42,7 +43,7 @@ batch-render
 | expand-on-dragenter | `boolean` | `true` | 是否在拖入后展开节点 |
 | expanded-keys | `Array<string \| number>` | `undefined` | 如果设定则展开受控 |
 | filter | `(node: TreeOption) => boolean` | `undefined` | 一个简单的字符串过滤算法 |
-| key-field | `string` | `'key'` | `TreeOption` 中的 key 字段名 |
+| key-field | `string` | `'key'` | 替代 `TreeOption` 中的 key 字段名 |
 | label-field | `string` | `'label'` | 替代 `TreeOption` 中的 label 字段名 |
 | leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
 | multiple | `boolean` | `false` | 是否允许节点多选 |
--- a/src/tree/src/Tree.tsx
+++ b/src/tree/src/Tree.tsx
@ -62,12 +62,16 @@ import style from './styles/index.cssr'
 const ITEM_SIZE = 30 // 24 + 3 + 3

 export function createTreeMateOptions<T> (
-  keyField: string
+  keyField: string,
+  childrenField: string
 ): TreeMateOptions<T, T, T> {
  return {
    getKey (node: T) {
      return (node as any)[keyField]
    },
+    getChildren (node: T) {
+      return (node as any)[childrenField]
+    },
    getDisabled (node: T) {
      return !!((node as any).disabled || (node as any).checkboxDisabled)
    }
@ -86,6 +90,10 @@ export const treeSharedProps = {
    type: String,
    default: 'label'
  },
+  childrenField: {
+    type: String,
+    default: 'children'
+  },
  defaultExpandedKeys: {
    type: Array as PropType<Key[]>,
    default: () => []
@ -236,7 +244,7 @@ export default defineComponent({
      : computed(() =>
        createTreeMate<TreeOption>(
          props.data,
-          createTreeMateOptions(props.keyField)
+          createTreeMateOptions(props.keyField, props.childrenField)
        )
      )
    const dataTreeMateRef = props.internalDataTreeMate