在Vue项目中使用Element Plus的el-select组件时,实现远程搜索和搜索结果回显功能是一个常见的需求。下面我将分点详细解释如何实现这两个功能,并提供相应的代码片段。 一、实现el-select组件的远程搜索功能 要实现远程搜索功能,你需要设置el-select组件的remote、filterable、reserve-keyword属性,并绑定remote-method方法。
当这个下拉框在编辑页时,需要把同样已经多选的内容完整回显到这个下拉框中,因为数据本身就是多选,接口还是是分页的,回显时肯定不能使用接口查询功能来回显数据。因此,el-select的:value绑定就不应该只绑定value了。 HTML <template><el-selectv-model="selectValue"multiplefilterableremotereserve-keywordplaceholder="请...
1<el-form-itemlabel="指标时点"label-width="80px"prop="statsIndicatorDateType">2<el-select3:ref="'selectIndicatorDateType' + i"4filterable5clearable6placeholder="请选择指标时点"7v-model="item.indicatorForm.statsIndicatorDateType"8size="mini"9@change="changeStatsIndicatorDateType(item, $event)"...
编辑需要回显时的逻辑(情况2关键点) <template><el-selectv-model="selectValue"multiplefilterableremotereserve-keywordplaceholder="请搜索并选择内容":remote-method="remoteMethod"style="width:240px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-s...
* 回显还有另一种用法,就是给options设置初始值,初始值内容为需要回显的内容 * searchField:(非必传)远程搜索用的字段,不传则不能实现远程搜索; * 要求接口支持和el-select开启搜索(filterable,并重置自定义搜索方法(:filter-method="()=>{}")) ...
在el-select远程搜索中会有个回显问题 就是明明传入了绑定值但是却会显示不出来 解决代码如下 <el-selectv-model="ruleForm.selectId"filterableremoteref="select"clearablereserve-keywordplaceholder="请输入问卷名称/id进行搜索":remote-method="search"><el-optionv-for="item in options":key="item.id":label...
<template> <el-select v-model.trim="keyword" v-loadmore:el-select-dropdown__list="loadMore" class="remote-select" :popper-append-to-body="false" filterable remote reserve-keyword clearable placeholder="请输入关键字进行查询" :remote-method="remoteMethod" :loading="loading" @change="handleChange...
<select-tree:value="test":options="options":props="{value: 'id', // ID字段名label: 'label', // 显示名称children: 'children' // 子级字段名}":filterable="true"/> 数据 看到这个数据,肯定明白,组件已经支持了数据回显。 test: '1-1',// 测试树数据options: [{label: '一级 1',id: '1...
出现这种问题原因我觉得大概是因为是懒加载数据,所以数据回显时还未加载导致的,但是不知道怎么解决!!! 下面我放上主要实现代码,希望大佬帮我看看如何才能在回显时展示label值,不展示id,感谢。 HTML代码: <el-selectv-model.trim="form.apiId"filterableplaceholder="请输入url"remote:remote-method="remoteMethod"v...
参考资料: <el-selectref="selectDom"v-model="form.diagnosisIds":remote-method="remoteMethod"placeholder="请选择"clearablefilterablemultipleremote@visible-change="templateTagChange"><el-optionv-for="item in relationList":key="item.id":label="item.name":value="item.id"/></el-select><script>ex...