当前位置：首页 > article >正文

【Vue - Element 】实现表单输入框的远程搜索功能

article 2025/1/15 15:31:14

需求

表单是一个常见的元素，而在表单中，常常需要用户从大量的数据中选择一个或多个选项。

为了提高用户体验，提供远程搜索功能可以帮助用户快速找到所需的选项，而不是从冗长的下拉列表中手动查找。

以该需求为例，我们需要在【所属测试计划】字段实现远程搜索功能，能够在根据输入的关键字从服务器端（后端）获取匹配的数据列表，并且可进行选择

实现思路

使用Element UI 表单中的Select选择器组件：

v-model：进行数据绑定，将选择框的值与Vue实例中的数据对象绑定
remote：是否启用远程搜索
filterable：是否可搜索（启用远程搜索需要同时设置remote和filterable为true）
remote-method：远程搜索方法，会在输入值变化时进行调用

<el-option>中遍历远程搜索获取到的testPlanList集合：

v-for：使用 Vue 的v-for指令对 testPlanList 数组进行遍历，将数组中的每个元素作为一个选项。
:key：每个选项设置唯一的键，具有唯一性。
:lable：设置选项的显示文本。
:value：设置选项的值，当用户选择此选项时，form.planId会被更新为该值。

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="110px">
    <el-form-item label="所属测试计划" prop="planId">
      <el-select
        v-model="form.planId"
        placeholder="请选择所属测试计划"
        remote
        filterable
        :remote-method="remoteSearchTestPlans">
        <el-option
          v-for="plan in testPlanList"
          :key="plan.planId"
          :label="plan.planName"
          :value="plan.planId"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

远程搜索方法中，根据参数（输入值）发起查询请求，并将结果赋值给 this.testPlanList

data(){
    return{
       // 测试计划集合
      testPlanList:[],
    }
}


methods:{ 

   /** 远程搜索项目 */
    remoteSearchTestPlans(query) {
      this.loadingTestPlan = true;//加载loding，可去掉
      if(query !== ''){
        this.queryTestPlanParams.planName = query
        listPlan(this.queryTestPlanParams).then(response => {
          this.testPlanList = response.rows;
          this.loadingTestPlan = false;
        });
      }else{
        listPlan().then(response => {
          this.testPlanList = response.rows;
          this.loadingTestPlan = false;
        });
      }
    },

}

查看全文

http://www.kler.cn/a/503764.html