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

需求

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

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

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

实现思路

使用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;
        });
      }
    },

}

原文地址：https://blog.csdn.net/qq_32792547/article/details/145148695

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！