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-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博客