diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap index 96614957b..b363ae4da 100644 --- a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap +++ b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap @@ -687,7 +687,7 @@ exports[`Tree > render work 1`] = ` `; exports[`Tree > searchFn work 1`] = ` -"
+"
@@ -891,7 +891,7 @@ exports[`Tree > searchValue work 2`] = ` `; exports[`Tree > searchValue work 3`] = ` -"
+"
diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts index 4f5199314..9ae5a6308 100644 --- a/packages/components/tree/__tests__/tree.spec.ts +++ b/packages/components/tree/__tests__/tree.spec.ts @@ -664,6 +664,7 @@ describe('Tree', () => { props: { dataSource: [], empty: { description: emptyDescription } }, }) + expect(wrapper.classes()).toContain('ix-tree-empty') expect(wrapper.find('.ix-empty').text()).toBe(emptyDescription) }) @@ -673,6 +674,7 @@ describe('Tree', () => { slots: { empty: () => h(IxEmpty, { description: 'empty slot' }) }, }) + expect(wrapper.classes()).toContain('ix-tree-empty') expect(wrapper.find('.ix-empty-description').text()).toBe('empty slot') }) diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx index 314ae4ea0..0126e0e2e 100644 --- a/packages/components/tree/src/Tree.tsx +++ b/packages/components/tree/src/Tree.tsx @@ -113,6 +113,7 @@ export default defineComponent({ [`${prefixCls}-auto-height`]: autoHeight.value, [`${prefixCls}-focused`]: focused.value, [`${prefixCls}-show-line`]: mergedShowLine.value, + [`${prefixCls}-empty`]: !flattedNodes.value.length, } }) diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less index 213f354ed..d527881ae 100644 --- a/packages/components/tree/style/index.less +++ b/packages/components/tree/style/index.less @@ -131,6 +131,12 @@ } } + &.@{tree-prefix}-empty { + display: flex; + align-items: center; + justify-content: center; + } + .@{tree-node-prefix} { position: relative; display: flex;