diff --git a/components/config-provider/index.jsx b/components/config-provider/index.jsx
index 0aab21431..8178180bb 100644
--- a/components/config-provider/index.jsx
+++ b/components/config-provider/index.jsx
@@ -1,6 +1,6 @@
import Vue from 'vue';
import PropTypes from '../_util/vue-types';
-import { filterEmpty } from '../_util/props-util';
+import { filterEmpty, getComponentFromProp } from '../_util/props-util';
import defaultRenderEmpty from './renderEmpty';
function getWatch(keys = []) {
@@ -46,7 +46,7 @@ const ConfigProvider = {
},
methods: {
renderEmptyComponent() {
- const customRender = (this.$scopedSlots && this.$scopedSlots['renderEmpty']) || this.$slots['renderEmpty'];
+ const customRender = getComponentFromProp(this,'renderEmpty');
return this.$props.renderEmpty || customRender || defaultRenderEmpty;
},
getPrefixCls(suffixCls, customizePrefixCls) {
diff --git a/components/tree/DirectoryTree.jsx b/components/tree/DirectoryTree.jsx
index 38c23a58d..b17823368 100644
--- a/components/tree/DirectoryTree.jsx
+++ b/components/tree/DirectoryTree.jsx
@@ -7,6 +7,7 @@ import { calcRangeKeys, getFullKeyList } from './util';
import Icon from '../icon';
import BaseMixin from '../_util/BaseMixin';
import { initDefaultProps, getOptionProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
// export type ExpandAction = false | 'click' | 'doubleClick';
@@ -37,7 +38,6 @@ export default {
props: initDefaultProps(
{ ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleclick']) },
{
- prefixCls: 'ant-tree',
showIcon: true,
expandAction: 'click',
},
@@ -49,7 +49,9 @@ export default {
// // Shift click usage
// lastSelectedKey?: string;
// cachedSelectedKeys?: string[];
-
+ inject: {
+ configProvider: { default: () => ({}) },
+ },
data() {
const props = getOptionProps(this);
const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props;
@@ -181,7 +183,9 @@ export default {
},
render() {
- const { prefixCls, ...props } = getOptionProps(this);
+ const { prefixCls: customizePrefixCls, ...props } = getOptionProps(this);
+ const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+ const prefixCls = getPrefixCls('tree', customizePrefixCls);
const { _expandedKeys: expandedKeys, _selectedKeys: selectedKeys } = this.$data;
const treeProps = {
props: {
diff --git a/components/tree/Tree.jsx b/components/tree/Tree.jsx
index 93fd161b4..fc70ae3e3 100644
--- a/components/tree/Tree.jsx
+++ b/components/tree/Tree.jsx
@@ -2,7 +2,9 @@ import warning from 'warning';
import { Tree as VcTree, TreeNode } from '../vc-tree';
import animation from '../_util/openAnimation';
import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps, filterEmpty } from '../_util/props-util';
+import { initDefaultProps, getOptionProps, filterEmpty, getComponentFromProp, getClass } from '../_util/props-util';
+import { cloneElement } from '../_util/vnode';
+import { ConfigConsumerProps } from '../config-provider';
import Icon from '../icon';
function TreeProps() {
@@ -73,6 +75,7 @@ function TreeProps() {
// onDrop: (options: AntTreeNodeMouseEvent) => void,
showIcon: PropTypes.bool,
icon: PropTypes.func,
+ switcherIcon: PropTypes.any,
prefixCls: PropTypes.string,
filterTreeNode: PropTypes.func,
openAnimation: PropTypes.any,
@@ -90,7 +93,6 @@ export default {
event: 'check',
},
props: initDefaultProps(TreeProps(), {
- prefixCls: 'ant-tree',
checkable: false,
showIcon: false,
openAnimation: {
@@ -98,6 +100,9 @@ export default {
props: { appear: null },
},
}),
+ inject: {
+ configProvider: { default: () => ({}) },
+ },
created() {
warning(
!('treeNodes' in getOptionProps(this)),
@@ -106,8 +111,8 @@ export default {
},
TreeNode,
methods: {
- renderSwitcherIcon({ isLeaf, expanded, loading }) {
- const { prefixCls, showLine } = this.$props;
+ renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, expanded, loading }) {
+ const { showLine } = this.$props;
if (loading) {
return ;
}
@@ -123,10 +128,20 @@ export default {
/>
);
} else {
+ const switcherCls = `${prefixCls}-switcher-icon`;
if (isLeaf) {
return null;
+ }else if (switcherIcon) {
+ const switcherOriginCls = getClass(switcherIcon[0]);
+ return cloneElement(switcherIcon, {
+ class: {
+ ...switcherOriginCls,
+ [switcherCls]: true,
+ },
+ });
+ } else {
+ return ;
}
- return ;
}
},
updateTreeData(treeData) {
@@ -167,7 +182,10 @@ export default {
},
render() {
const props = getOptionProps(this);
- const { prefixCls, showIcon, treeNodes } = props;
+ const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props;
+ const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+ const prefixCls = getPrefixCls('tree', customizePrefixCls);
+ const switcherIcon = getComponentFromProp(this, 'switcherIcon');
const checkable = props.checkable;
let treeData = props.treeData || treeNodes;
if (treeData) {
@@ -176,10 +194,11 @@ export default {
const vcTreeProps = {
props: {
...props,
+ prefixCls,
checkable: checkable ? : checkable,
children: filterEmpty(this.$slots.default || []),
__propsSymbol__: Symbol(),
- switcherIcon: this.renderSwitcherIcon,
+ switcherIcon: (nodeProps) => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
},
on: this.$listeners,
ref: 'tree',
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index f1650e503..0bf711e39 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -16,6 +16,7 @@ You can customize icons for different nodes.
defaultExpandAll
:defaultSelectedKeys="['0-0-0']"
>
+
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index b1063e89f..7fd4bbd16 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -24,6 +24,7 @@
| multiple | Allows selecting multiple treeNodes | boolean | false |
| selectedKeys(.sync) | (Controlled) Specifies the keys of the selected treeNodes | string\[] \| number\[] | - |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
+| switcherIcon | customize collapse/expand icon of tree node | slot(vnode) | - |
| showLine | Shows a connecting line | boolean | false |
### Events
@@ -66,3 +67,9 @@ One of the Tree `treeNode` prop for describing the tree's node, TreeNode has the
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| expandAction | Directory open logic, optional `false` `'click'` `'doubleclick'` | string | click |
+
+## FAQ
+
+### How to hide file icon when use showLine?
+
+File icon realize by using switcherIcon. You can overwrite the style to hide it
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index dc25f9a21..a492c648e 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -24,6 +24,7 @@
| multiple | 支持点选多个节点(节点本身) | boolean | false |
| selectedKeys(.sync) | (受控)设置选中的树节点 | string\[] \| number\[] | - |
| showIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 | boolean | false |
+| switcherIcon | 自定义树节点的展开/折叠图标 | slot(vnode) | - |
| showLine | 是否展示连接线 | boolean | false |
@@ -68,5 +69,11 @@
| --- | --- | --- | --- |
| expandAction | 目录展开逻辑,可选 `false` `'click'` `'doubleclick'` | string | click |
+## FAQ
+
+### 在 showLine 时,如何隐藏子节点图标?
+
+文件图标通过 switcherIcon 来实现,如果不需要你可以覆盖对应的样式
+