Element UI搜索输入框交互优化：点击不弹窗，输入显示结果表格

修改后模板代码 #

<el-input
  v-model="listQuery.searchMacTextValue"
  placeholder="Device ID"
  style="width: 200px"
  class="filter-item"
  @input="startSearch"
>
  <template #append>
    <el-button @click="triggerSearch">
      <i class="el-icon-search"></i> Search
    </el-button>
  </template>
</el-input>

<el-dialog
  v-model:visible="dialogVisible"
  title="Search Results"
  width="80%"
  @close="resetSearch"
>
  <el-table :data="searchResults" style="width: 100%">
    <el-table-column label="User Name" prop="userName"></el-table-column>
    <el-table-column label="Phone Number" prop="phoneNumber"></el-table-column>
    <el-table-column label="Email" prop="email"></el-table-column>
  </el-table>
</el-dialog>

修改后函数代码 #

startSearch() {
  // 只有输入内容不为空时才触发搜索并打开对话框
  if (this.listQuery.searchMacTextValue.trim()) {
    this.dialogVisible = true;
    // 替换为实际API调用，以下是模拟数据
    this.searchResults = [
      {
        userName: "John Doe",
        phoneNumber: "123-456-7890",
        email: "john@example.com",
      },
      {
        userName: "Jane Smith",
        phoneNumber: "987-654-3210",
        email: "jane@example.com",
      }
    ];
  } else {
    // 空输入时关闭对话框并清空结果
    this.resetSearch();
  }
},
triggerSearch() {
  // 点击搜索按钮手动触发搜索
  this.startSearch();
},
resetSearch() {
  this.listQuery.searchMacTextValue = "";
  this.searchResults = [];
  this.dialogVisible = false;
}

关键修改说明 #

• 替换el-autocomplete为el-input：原组件自带下拉弹窗触发逻辑，改用普通输入框彻底消除点击输入框就弹窗的问题
• 控制对话框显示时机：仅当输入框有非空内容时，才打开对话框展示搜索结果
• 迁移表格到对话框内：把结果表格从下拉菜单移到对话框中，符合需求里的对话框展示要求
• 补充按钮触发逻辑：保留搜索按钮功能，支持手动点击触发搜索
• 完善重置逻辑：关闭对话框时自动清空输入内容和搜索结果，保证下次搜索的初始状态干净

内容的提问来源于stack exchange，提问作者Ali Haider