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

Author: [email protected]

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