【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-selectv-model="form.planId"placeholder="请选择所属测试计划"remotefilterable:remote-method="remoteSearchTestPlans"><el-optionv-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 = querylistPlan(this.queryTestPlanParams).then(response => {this.testPlanList = response.rows;this.loadingTestPlan = false;});}else{listPlan().then(response => {this.testPlanList = response.rows;this.loadingTestPlan = false;});}},}