el-select 回显操作
前沿
之前看到很多人问我 select 的回显操作 今天就来写一下(本文已 vue3来讲解 vue2自行参考)
效果
el-select回显操作
"element-plus": "^2.8.0",
"vue": "^3.2.47",回显方式
1、本地回显
本地回显就是将 Id、Name 组装为 option 里面的一组数据 这个时候一般需要后端配合 返回 Id 和 name
2、接口回显
接口回显就是通过选择的 name 发送请求模糊搜索数据
关键代码
<template><el-select:popper-class-name="popperClassName"v-model="selectedValue"v-loadmore="handleLoadMore"placeholder="请选择":popper-class="popperClassName":multiple="!isOnlySingle"collapse-tagsreserve-keyword:teleported="true"filterableremote:remote-method="handleRemoteMethod"@visible-change="handleVisibleChange"@change="onSelectChange"remote-show-suffix><el-option v-if="isShowAll" label="全部" value=""></el-option><!-- :label="item.Name" --><el-optionv-for="item in baseSelectUserList":key="item.Id":label="item.Name":value="item[keyName]"><span style="float: left">{{ item.Name }}</span><span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{onShowLabel(item)}}</span></el-option></el-select>
</template>
<script setup lang="ts">
import { getUserProfile } from "@/api/Passport";
import { GetUserProfileType } from "@/api/Passport/types";
import debounce from "@/utils/debounce";const emits = defineEmits(["update:modelValue", "change"]);
const props = defineProps({/** 双向绑定 */modelValue: {type: [String, Array as () => Array<string>],default: null,},/** 机构参数 */orgIds: {type: [String, Array as () => Array<string>],default: "",},/** 科室参数 */deptIds: {type: [String, Array as () => Array<string>],default: "",},/** 角色 */roleTypes: {type: [String, Array as () => Array<string>],default: "",},/** 是否获取权限内的数据 */scopeable: {type: Boolean,default: false,},/** 是否是通过redash */isRedash: {type: Boolean,default: false,},/** 选择的是否是单选 */isOnlySingle: {type: Boolean,default: true,},/** 双向绑定的值是哪个字段 */keyName: {type: String,default: "Id",},/** 关键字搜索默认数据 */remoteName: {type: String,default: "",},/** dtoType */dtoTypeName: {type: String,default: "QueryUserOutputDto3",},/** 下拉列表显示什么数据 */selectShowLabel: {type: String,default: "",},/** 是否显示全部选择 */isShowAll: {type: Boolean,default: true,},/** 是否显示默认列表数据（主要是做回显操作） */isUseDefaultList: {type: Boolean,default: false,},/** 一个页面多次使用 select popperClassName不能重复 切记！！！！！！ */popperClassName: {require: true,type: String,},
});
onMounted(() => {if (props.remoteName && !props.isUseDefaultList) { // 通过 name 模糊搜索pageInfo.value.keyword = props.remoteNameloadData(props.roleTypes, false);} else if (props.remoteName && props.isUseDefaultList){ // 将 id 和那么组装为baseSelectUserList里面的一条选项baseSelectUserList.value = [{Id: props.modelValue as string,Name: props.remoteName,},];}
})
</script>
<style lang="scss" scoped></style><span>通过本地保留数据进行回显操作</span><el-load-search-selectv-model="userInfo.Id"placeholder="请选择医生":role-types="['doctor']":scopeable="false":is-redash="false":is-only-single="true"popper-class-name="oldAssistant":remote-name="userInfo.Name":is-use-default-list="true"selectShowLabel="Id"style="width: 140px;"/><span>此方法就会导致回显只有一条数据，其他只能通过搜索获取</span><br><br><br><span>通过接口进行回显操作</span><el-load-search-selectv-model="userInfo.Id1"placeholder="请选择治疗师":role-types="['therapist']":scopeable="false":is-redash="false":is-only-single="true":remote-name="userInfo.Name1"popper-class-name="newAssistant"selectShowLabel="Id"style="width: 140px;"/><span>此方法就会回显多条相同名称的数据</span>ps： 二次封装 select 组件 elementplus 二次封装 select 自定义指令上拉加载更多 完美解决 多次接口调用 重新加载数据多次调用！！！-CSDN博客