From fc15cad89891b89ab30897dd33e91284dbdb5d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Tue, 9 Jul 2024 19:01:32 +0800
Subject: [PATCH] fix(components): [tree-select] fix filter no matching data
 error (#17473)

* fix(components): [tree-select] fix filter no matching data error

* fix: immediate
---
 .../tree-select/__tests__/tree-select.test.tsx       |  4 ++++
 .../components/tree-select/src/tree-select-option.ts | 12 +++++++++++-
 packages/components/tree-select/src/tree.ts          |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/components/tree-select/__tests__/tree-select.test.tsx b/packages/components/tree-select/__tests__/tree-select.test.tsx
index b5e195632e..a649a2150e 100644
--- a/packages/components/tree-select/__tests__/tree-select.test.tsx
+++ b/packages/components/tree-select/__tests__/tree-select.test.tsx
@@ -225,6 +225,10 @@ describe('TreeSelect.vue', () => {
     tree.vm.filter('一级 1')
     await nextTick()
     expect(tree.findAll('.el-tree-node:not(.is-hidden)').length).toBe(1)
+    expect(document.querySelector('.el-select-dropdown__empty')).toBeFalsy()
+    tree.vm.filter('no match')
+    await nextTick()
+    expect(document.querySelector('.el-select-dropdown__empty')).toBeTruthy()
   })
 
   test('props', async () => {
diff --git a/packages/components/tree-select/src/tree-select-option.ts b/packages/components/tree-select/src/tree-select-option.ts
index 04ab121a78..2b64e15d76 100644
--- a/packages/components/tree-select/src/tree-select-option.ts
+++ b/packages/components/tree-select/src/tree-select-option.ts
@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, nextTick } from 'vue'
+import { defineComponent, getCurrentInstance, nextTick, watch } from 'vue'
 import { ElOption } from '@element-plus/components/select'
 
 const component = defineComponent({
@@ -26,6 +26,16 @@ const component = defineComponent({
       }
     })
 
+    watch(
+      () => ctx.attrs.visible,
+      (val) => {
+        result.states.visible = val
+      },
+      {
+        immediate: true,
+      }
+    )
+
     return result
   },
   methods: {
diff --git a/packages/components/tree-select/src/tree.ts b/packages/components/tree-select/src/tree.ts
index a4f1c2fdcb..9de3f2c06e 100644
--- a/packages/components/tree-select/src/tree.ts
+++ b/packages/components/tree-select/src/tree.ts
@@ -138,6 +138,7 @@ export const useTree = (
           value: getNodeValByProp('value', data),
           label: getNodeValByProp('label', data),
           disabled: getNodeValByProp('disabled', data),
+          visible: node.visible,
         },
         props.renderContent
           ? () => props.renderContent(h, { node, data, store })