1.需求

表单项需具有搜索功能，并以下拉选的形式展现

2.实现

<template><div class="medicalRecord"><div class="main-content" v-if="!taskDetail"><div class="content-top"><el-form style="width: 100%" :inline="true" :model="formResult" ref="formResult" hide-required-asterisk class="form-box" :rules="formRules"><ul class="flex-space-between" style="width: 100%"><li style="width: 322px; margin-left: 3px !important;"><el-form-item label="管理机构：" label-width="82px"><el-selectv-model="formResult.branchCom"filterableremoteclearablereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="remoteLoading":disabled="isRemote"@focus="repeatList"@change="handleSelectBranchCom"><el-optionv-for="item in remoteOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></li></ul></el-form></div></div></div>
</template>
<script>
export default {name: 'taskManage',data () {return {formResult: {branchCom: '', // 管理机构branchComCode: '' // 管理机构编码},formRules: {// grpContNo: [{required: true, message: '请输入团体保单号', trigger: 'blur'}] // 团体保单号必填},remoteOptions: [], // 远程搜索列表remoteList: [], // 返回的远程搜索列表remoteLoading: false, // 是否正在从远程获取数据isRemote: false // 是否为远程搜索}},created () {// 获取当前登录人的中支// this.formResult.branchComCode = this.$cookies.get('branchCom')// console.log(this.formResult.branchComCode)this.getBranchCom() // 获取管理机构列表},methods: {// 获取管理机构列表getBranchCom () {console.log('获取管理机构，入参；；；this.branchComCode', this.formResult.branchComCode)// let bcode = this.formResult.branchComCodethis.$axios({url: 'survey-app-service/rest/survey/branchcom/query',method: 'post',data: {'tradeMap': {'manageCom': '','branchCom': '%'}}}).then(res => {console.log(res)let data = res.dataif (data.tradeMap.resultCode === '00') {this.remoteList = data.tradeMap.comCode.map(item => {// return { value: item, label: item }return {value: item,label: item.split(',')[1]}})console.log('this.remoteList')console.log(this.remoteList)}}).catch(() => {this.$message.error('系统异常')})},// 清空选择项repeatList () {this.remoteOptions = this.remoteList.filter(item => {return item.label})},// 选中管理机构时触发handleSelectBranchCom (item) {console.log('远程搜索选中后返回的item：：：：：即value的值')console.log(item)this.formResult.branchComCode = item.split(',')[0]},// 管理机构触发的远程搜索方法remoteMethod (query) {console.log(this.remoteList)if (query !== '') {this.remoteLoading = truesetTimeout(() => {this.remoteLoading = falsethis.remoteOptions = this.remoteList.filter(item => {return item.value.indexOf(query) > -1})console.log('this.remoteOptions')console.log(this.remoteOptions)}, 200)} else {this.remoteOptions = []}}}
}
</script>

3.后端返回结果示例

{errorList:[]
serviceNode:""
shardFlag:false
storageMap:{}
tradeMap:{message:"查询成功"resultCode:"00"comCode:["01,北京分公司", "02,湖北分公司", "0201,湖北分公司宜昌中心"]
}}

4.效果展示

element UI-远程搜索（el-select）相关推荐

修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
element ui表格data搜索重置功能
element ui表格搜索重置功能本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
element ui table实现考勤排班表
1.项目需求 1.1需求制作如下的考勤排班表,可以显示每个岗位每一天的考勤排班情况,并且可以下拉选择人员排班人员更改. 1.2 难点分析在表格中嵌入下拉选择功能. 需要动态显示每个月的排班情况,因 ...
vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
vue + elemen可远程搜索select选择器的封装（思路及源码分享）
目录项目场景: 效果 1.封装下拉列表 2.页面中使用项目场景: 我有很多的Form表单,在Form表单内又有很多的select选择器,这些选择器的下拉列表都是通过后端的接口传回的数据渲染的,如果 ...
Element UI极简教程(4)：Select、Switch组件的使用
Java大联盟致力于最高效的Java学习关注 B 站搜索:楠哥教你学Java 获取更多优质视频教程 Select 下拉框 Element UI 的 Select 直接使用 el-select ...
element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
element 搜索匹配_如何在Element-ui中实现一个远程搜索功能
如何在Element-ui中实现一个远程搜索功能发布时间:2021-01-29 14:50:00 来源:亿速云阅读:87 作者:Leah 这篇文章给大家介绍如何在Element-ui中实现一个远程 ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

element UI-远程搜索（el-select）

1.需求

2.实现

3.后端返回结果示例

4.效果展示

element UI-远程搜索（el-select）相关推荐

最新文章

热门文章