前沿
之前看到很多人问我 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-tags
reserve-keyword
:teleported="true"
filterable
remote
:remote-method="handleRemoteMethod"
@visible-change="handleVisibleChange"
@change="onSelectChange"
remote-show-suffix
>
<el-option v-if="isShowAll" label="全部" value=""></el-option>
<!-- :label="item.Name" -->
<el-option
v-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.remoteName
loadData(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-select
v-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-select
v-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博客