网站后台百度商桥代码哪里安装,专业外贸网站,wordpress数据库代码,网站和app软件制作公司需求
表单是一个常见的元素#xff0c;而在表单中#xff0c;常常需要用户从大量的数据中选择一个或多个选项。
为了提高用户体验#xff0c;提供远程搜索功能可以帮助用户快速找到所需的选项#xff0c;而不是从冗长的下拉列表中手动查找。
以该需求为例#xff0c;我…需求
表单是一个常见的元素而在表单中常常需要用户从大量的数据中选择一个或多个选项。
为了提高用户体验提供远程搜索功能可以帮助用户快速找到所需的选项而不是从冗长的下拉列表中手动查找。
以该需求为例我们需要在【所属测试计划】字段实现远程搜索功能能够在根据输入的关键字从服务器端后端获取匹配的数据列表并且可进行选择 实现思路
使用Element UI 表单中的Select选择器组件
v-model进行数据绑定将选择框的值与Vue实例中的数据对象绑定remote是否启用远程搜索filterable是否可搜索启用远程搜索需要同时设置remote和filterable为trueremote-method远程搜索方法会在输入值变化时进行调用
el-option中遍历远程搜索获取到的testPlanList集合 v-for使用 Vue 的v-for指令对 testPlanList 数组进行遍历将数组中的每个元素作为一个选项。:key每个选项设置唯一的键具有唯一性。:lable设置选项的显示文本。:value设置选项的值当用户选择此选项时form.planId会被更新为该值。
templateel-form refform :modelform :rulesrules label-width110pxel-form-item label所属测试计划 propplanIdel-selectv-modelform.planIdplaceholder请选择所属测试计划remotefilterable:remote-methodremoteSearchTestPlansel-optionv-forplan in testPlanList:keyplan.planId:labelplan.planName:valueplan.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;});}},}
