fix(auto-complete): options is an empty array, empty is not effective

Tencent · Jan 20, 2025 · 86b8608 · 86b8608
1 parent fba353b
commit 86b8608
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/auto-complete/_example/base.vue b/src/auto-complete/_example/base.vue
@@ -2,13 +2,17 @@
   <t-space direction="vertical" class="t-demo-auto-complete__base">
     <t-auto-complete
       v-model="value"
-      :options="options"
+      :options="[]"
       highlightKeyword
       :filterable="false"
       placeholder="请输入关键词搜索"
       clearable
       @change="onChange"
-    />
+    >
+      <template #empty>
+        <div>sdfa</div>
+      </template>
+    </t-auto-complete>
 
     <!-- 复杂 UI 需求，可参考当前示例完成 -->
     <t-auto-complete

diff --git a/src/auto-complete/auto-complete.tsx b/src/auto-complete/auto-complete.tsx
@@ -158,7 +158,7 @@ export default defineComponent({
       />
     );
     // 联想词列表
-    const listContent = (
+    const listContent = Array.isArray(this.options) && (
       <AutoCompleteOptionList
         ref="optionListRef"
         value={this.tValue}
@@ -170,16 +170,15 @@ export default defineComponent({
         highlightKeyword={this.highlightKeyword}
         filterable={this.filterable}
         filter={this.filter}
-        empty={this.empty}
+        empty={renderTNodeJSX(this, 'empty')}
         scopedSlots={{
           option: this.$scopedSlots.option,
-          empty: this.$scopedSlots.empty,
         }}
       />
     );
     const topContent = renderTNodeJSX(this, 'panelTopContent');
     const bottomContent = renderTNodeJSX(this, 'panelBottomContent');
-    const panelContent = topContent || this.options?.length || bottomContent ? (
+    const panelContent = topContent || listContent || bottomContent ? (
         <div class={`${this.classPrefix}-auto-complete__panel`}>
           {topContent}
           {listContent}