feat(tree): 添加form-props-'replaceFields'字段 (#1395)

* feat(tree): 添加form-props-'replaceFields'字段

* test: add test file

* docs: 修改实例名称

Author: 张晨成

components/tree/Tree.jsx

@@ -87,6 +87,11 @@ function TreeProps() {
     openAnimation: PropTypes.any,
     treeNodes: PropTypes.array,
     treeData: PropTypes.array,
+    /**
+     * @default{title,key,children}
+     * 替换treeNode中 title,key,children字段为treeData中对应的字段
+     */
+    replaceFields: PropTypes.object,
   };
 }
 
@@ -151,13 +156,15 @@ export default {
     },
     updateTreeData(treeData) {
       const { $slots, $scopedSlots } = this;
+      const defaultFields = { children: 'children', title: 'title', key: 'key' };
+      const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
       return treeData.map(item => {
+        const key = item[replaceFields.key];
+        const children = item[replaceFields.children];
         const {
-          children,
           on = {},
           slots = {},
           scopedSlots = {},
-          key,
           class: cls,
           style,
           ...restProps
@@ -171,7 +178,7 @@ export default {
           title:
             $slots[slots.title] ||
             ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) ||
-            restProps.title,
+            restProps[replaceFields.title],
           dataRef: item,
           on,
           key,

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -130,6 +130,26 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
 </ul>
 `;
 
+exports[`renders ./components/tree/demo/replaceFields.md correctly 1`] = `
+<ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">
+  <li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1</span></span>
+    <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+      <li role="treeitem" class="ant-tree-treenode-disabled ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked ant-tree-treenode-selected"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="张晨成" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">张晨成</span></span>
+        <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
+          <li role="treeitem" class="ant-tree-treenode-switcher-close"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span></li>
+        </ul>
+      </li>
+      <li role="treeitem" class="ant-tree-treenode-switcher-open ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher_open"><i aria-label="icon: caret-down" class="ant-tree-switcher-icon anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></i></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-1" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-1</span></span>
+        <ul data-expanded="true" role="group" class="ant-tree-child-tree ant-tree-child-tree-open">
+          <li role="treeitem" class="ant-tree-treenode-switcher-close ant-tree-treenode-checkbox-checked"><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="zcvc" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">zcvc</span></span></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+`;
+
 exports[`renders ./components/tree/demo/search.md correctly 1`] = `
 <div><span class="ant-input-affix-wrapper ant-input-search" style="margin-bottom: 8px;"><input placeholder="Search" type="text" class="ant-input"><span class="ant-input-suffix"><i aria-label="icon: search" tabindex="-1" class="ant-input-search-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span>
   <ul role="tree" unselectable="on" class="ant-tree ant-tree-icon-hide">

components/tree/demo/index.vue

@@ -7,6 +7,7 @@ import Dynamic from './dynamic';
 import Line from './line';
 import Search from './search';
 import Directory from './directory';
+import ReplaceFields from './replaceFields';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -37,6 +38,7 @@ export default {
         <md cn={md.cn} us={md.us} />
         <BasicControlled />
         <Basic />
+        <ReplaceFields/>
         <CustomizedIcon />
         <Draggable />
         <Dynamic />

components/tree/demo/replaceFields.md

@@ -0,0 +1,67 @@
+<cn>
+#### 自定义TreeNode字段
+替换treeNode中 title,key,children字段为treeData中对应的字段
+</cn>
+
+<us>
+#### ReplaceFields
+Replace the title,key and children fields in treeNode with the corresponding fields in treeData.
+</us>
+
+```tpl
+<template>
+  <a-tree
+    checkable
+    :treeData="treeData"
+    :defaultExpandedKeys="['0-0-0', '0-0-1']"
+    :defaultSelectedKeys="['0-0-0', '0-0-1']"
+    :defaultCheckedKeys="['0-0-0', '0-0-1']"
+    @select="this.onSelect"
+    @check="this.onCheck"
+    :replaceFields="replaceFields"/>
+</template>
+<script>
+  const treeData = [
+    {
+      name: 'parent 1',
+      key: '0-0',
+      child: [
+        {
+          name: '张晨成',
+          key: '0-0-0',
+          disabled: true,
+          child: [
+            { name: 'leaf', key: '0-0-0-0', disableCheckbox: true },
+            { name: 'leaf', key: '0-0-0-1' },
+          ],
+        },
+        {
+          name: 'parent 1-1',
+          key: '0-0-1',
+          child: [{ key: '0-0-1-0', name:'zcvc' }],
+        },
+      ],
+    },
+  ];
+
+  export default {
+    data() {
+      return {
+        treeData,
+        replaceFields:{
+        children:'child',
+        title:'name'
+        }
+      };
+    },
+    methods: {
+      onSelect(selectedKeys, info) {
+        console.log('selected', selectedKeys, info);
+      },
+      onCheck(checkedKeys, info) {
+        console.log('onCheck', checkedKeys, info);
+      },
+    },
+  };
+</script>
+```

components/tree/index.en-US.md

@@ -5,6 +5,7 @@
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | treeData | treeNode of tree, please use `treeNodes` before v1.1.4 | array | - |
+| replaceFields | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } |
 | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
 | checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
 | checkedKeys(v-model) | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| number\[] \| {checked: string\[] \| number\[], halfChecked: string\[] \| number\[]} | \[] |

components/tree/index.zh-CN.md

@@ -5,6 +5,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | treeData | 节点的配置描述，具体项见下表, 1.1.4 之前的版本使用`treeNodes` | array | -- |
+| replaceFields | 替换treeNode中 title,key,children字段为treeData中对应的字段 | object |{children:'children', title:'title', key:'key' } |
 | autoExpandParent | 是否自动展开父节点 | boolean | true |
 | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
 | checkedKeys(v-model) | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| number\[] \| {checked: string\[] \| number\[], halfChecked: string\[] \| number\[]} | \[] |

site/dev.js

@@ -12,7 +12,7 @@ import Api from './components/api';
 import './components';
 import demoBox from './components/demoBox';
 import demoContainer from './components/demoContainer';
-import Test from '../components/table/demo/index.vue';
+import Test from '../components/tree/demo/index.vue';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
 Vue.use(Vuex);

types/tree/tree.d.ts

@@ -16,6 +16,19 @@ export declare class Tree extends AntdComponent {
    */
   treeData: TreeNode[];
 
+   /**
+   *
+   *@description Replace the title,key and children fields in treeNode with the corresponding fields in treeData
+   */
+  replaceFields?: {
+    /**@default 'children' */
+    children?: string;
+    /**@default 'title' */
+    title?: string;
+    /**@default 'key' */
+    key?: string;
+  };
+
   /**
    * Whether to automatically expand a parent treeNode
    * @default true