Skip to content

Commit

Permalink
feat(tree): 添加form-props-'replaceFields'字段 (#1395)
Browse files Browse the repository at this point in the history
* feat(tree): 添加form-props-'replaceFields'字段

* test: add test file

* docs: 修改实例名称
  • Loading branch information
张晨成 authored and tangjinzhou committed Nov 15, 2019
1 parent 5e27ff8 commit 3136e59
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 4 deletions.
13 changes: 10 additions & 3 deletions components/tree/Tree.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}

Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand Down
20 changes: 20 additions & 0 deletions components/tree/__tests__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions components/tree/demo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -37,6 +38,7 @@ export default {
<md cn={md.cn} us={md.us} />
<BasicControlled />
<Basic />
<ReplaceFields/>
<CustomizedIcon />
<Draggable />
<Dynamic />
Expand Down
67 changes: 67 additions & 0 deletions components/tree/demo/replaceFields.md
Original file line number Diff line number Diff line change
@@ -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>
```
1 change: 1 addition & 0 deletions components/tree/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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\[]} | \[] |
Expand Down
1 change: 1 addition & 0 deletions components/tree/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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\[]} | \[] |
Expand Down
2 changes: 1 addition & 1 deletion site/dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
13 changes: 13 additions & 0 deletions types/tree/tree.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 3136e59

Please sign in to comment.