el-select 回显操作

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