element plus输入框/下拉框实现自动搜索

输入框动态搜索

 使用 @input="handleQuery"

这里的handleQuery是之前写好的搜索点击事件，调用了条件查询的接口

补充 @keyup.enter="handleQuery"

@keyup.enter  键盘点击事件 点击enter时触发对应的操作    

 <el-form-item label="嫌疑人姓名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入嫌疑人姓名"
              clearable
              @input="handleQuery"
              @keyup.enter="handleQuery"
              class="!w-220px"
            />
          </el-form-item>

实际效果如下:

下拉框动态搜索

 在 el-select 内部 加入 @change事件  @change="sexChange"

<el-select
              v-model="queryParams.sex"
              placeholder="请选择性别"
              clearable
              class="!w-220px"
              @change="sexChange"
            >
              <el-option
                v-for="dict in sexList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

定义@change事件

const sexChange = (value) => {
  queryParams.sex = value
  handleQuery()
}

搜索条件

搜索结果

 

注意

仅实现简单功能，使用时可能需要根据项目需求进行优化