diff --git a/components/tree/demo/draggable-confirm.ts b/components/tree/demo/draggable-confirm.ts
index 6db476001f9..a41f69127d5 100644
--- a/components/tree/demo/draggable-confirm.ts
+++ b/components/tree/demo/draggable-confirm.ts
@@ -6,7 +6,7 @@ import { delay } from 'rxjs/operators';
@Component({
selector: 'nz-demo-tree-draggable-confirm',
template: `
-
+
`
})
export class NzDemoTreeDraggableConfirmComponent implements OnInit {
diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts
index ee059974ec5..42269bcec50 100644
--- a/components/tree/demo/draggable.ts
+++ b/components/tree/demo/draggable.ts
@@ -4,15 +4,8 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
@Component({
selector: 'nz-demo-tree-draggable',
template: `
-
- `,
- styles: [
- `
- :host ::ng-deep .draggable-tree .ant-tree-node-content-wrapper {
- width: calc(100% - 42px);
- }
- `
- ]
+
+ `
})
export class NzDemoTreeDraggableComponent implements OnInit {
nodes = [
diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
index 7d937e41336..ed83f42fc57 100644
--- a/components/tree/doc/index.en-US.md
+++ b/components/tree/doc/index.en-US.md
@@ -15,6 +15,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[]|NzTreeNode[]` | `[]` |
+| `[nzBlockNode]` | Whether treeNode fill remaining horizontal space | `boolean` | `false` |
| `[nzCheckable]` | Adds a Checkbox before the treeNodes| `boolean` | `false` |
| `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` |
| `[nzShowLine]` | Shows a connecting line | `boolean` | `false` |
diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
index 4e6a834af4e..d99d3d8ade8 100644
--- a/components/tree/doc/index.zh-CN.md
+++ b/components/tree/doc/index.zh-CN.md
@@ -16,6 +16,7 @@ subtitle: 树形控件
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[nzData]` | 元数据 | `NzTreeNodeOptions[]|NzTreeNode[]` | `[]` |
+| `[nzBlockNode]` | 是否节点占据一行 | `boolean` | `false` |
| `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` |
| `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` |
| `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` |
diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
index 23bce915337..351dd79f49d 100644
--- a/components/tree/nz-tree.component.ts
+++ b/components/tree/nz-tree.component.ts
@@ -65,6 +65,7 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor,
@Input() @InputBoolean() nzHideUnMatched = false;
@Input() @InputBoolean() nzSelectMode = false;
@Input() @InputBoolean() nzCheckStrictly = false;
+ @Input() @InputBoolean() nzBlockNode = false;
/**
* @deprecated use
* nzExpandAll instead
@@ -229,6 +230,7 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor,
[this.prefixCls]: true,
[this.prefixCls + '-show-line']: this.nzShowLine,
[`${this.prefixCls}-icon-hide`]: !this.nzShowIcon,
+ [`${this.prefixCls}-block-node`]: this.nzBlockNode,
['draggable-tree']: this.nzDraggable,
['ant-select-tree']: this.nzSelectMode
};
diff --git a/components/tree/nz-tree.spec.ts b/components/tree/nz-tree.spec.ts
index 52ed7a50dd6..c9d856d3548 100644
--- a/components/tree/nz-tree.spec.ts
+++ b/components/tree/nz-tree.spec.ts
@@ -398,6 +398,12 @@ describe('nz-tree', () => {
expect(treeInstance).toBeTruthy();
});
+ it('test nzBlockNode property', () => {
+ fixture.detectChanges();
+ const tree = treeElement.querySelector('.ant-tree') as HTMLElement;
+ expect(tree!.classList).toContain('ant-tree-block-node');
+ });
+
it('test drag event', fakeAsync(() => {
fixture.detectChanges();
const dragStartSpy = spyOn(treeInstance, 'onDragStart');
@@ -729,6 +735,7 @@ export class NzTestTreeBasicControlledComponent {
selector: 'nz-demo-tree-draggable',
template: `