@corgicoding-el/remote-select

为 @corgicoding/web-quick-start 工程模板设定的远程下拉组件

绑定依赖

1. @corgicoding/web-types
   • NormalizedError: 统一错误返回
   • NormalizedResponse: 统一接口返回
2. @corgicoding/axios-hook
   • useService: 获取当前 axios 实例

如何使用

安装工程到本地，并按需使用或全局使用

前置依赖

• element-plus
• axios
• @vueuse/core
• vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue @vueuse/core axios -S

安装

使用 pnpm 下载

pnpm install @corgicoding-el/remote-select -S

使用

假设有个接口 /test/getusers, 返回的内容为包含 username 、userId 的对象数组

<script setup>
import { RemoteSelect } from '@corgicoding-el/remote-select';
// import '@corgicoding-el/remote-select/style.css';

const selectValue = ref();
</script>

<template>
  <RemoteSelect
    v-model="selectValue"
    url="/test/getusers"
    option-label="username"
    option-value="userId"
  ></RemoteSelect>
</template>

props入参

/**
 * @description RemoteSelect的组件入参
 */
export interface RemoteSelectProps {
  modelValue: Array<string> | string | number | undefined; // 绑定值
  url: string; // 选项获取地址
  optionLabel: string; // 选项label选取key
  optionValue: string; // 选项value选取value
  isList?: boolean; // 是否列表获取接口
  multiple?: boolean; // 是否多选
  isString?: boolean; // 是否绑定值为字符串的多选
  query?: string; // 请求额外参数
  textType?: boolean; // 是否为文本
  eventOptions?: any; // 组件的原生事件
  resultKey?: string;
  strict?: boolean; // 严格模式，初始化去除未含有的值
  selectFirstOption?: boolean; // 选择第一项
}

/**
 * @description RemoteTreeSelect的组件入参
 */
export interface RemoteTreeSelectProps {
  modelValue: Array<string> | string | number | undefined; // 绑定值
  url: string; // 选项获取地址
  optionLabel: string; // 选项label选取key
  optionValue: string; // 选项value选取value
  optionChildren?: string;
  resultKey?: string;
  isList?: boolean; // 是否列表获取接口
  multiple?: boolean; // 是否多选
  isString?: boolean; // 是否绑定值为字符串的多选
  query?: string; // 请求额外参数
  textType?: boolean;
  eventOptions?: any;
  strict?: boolean; // 严格模式，初始化去除未含有的值
  selectFirstOption?: boolean; // 选择第一项
}

emits 事件

const Emits = defineEmits(['update:modelValue', 'change', 'request-done']);

暴露参数

defineExpose({
  loadOptions: getRemoteOptions,
  remoteOptions
});

按需使用

完整的案例如下

<script setup>
import { RemoteSelect } from '@corgicoding-el/remote-select';
import '@corgicoding-el/remote-select/style.css';

const selectValue = ref('');
const remoteSelectRef = ref<InstanceType<typeof RemoteSelect>>()

const onSelectChange = () => {
  console.log('change');
};

const selectOptions = ref<any>([]);
const onSelectRequestDone = (data) => {
    // remoteSelectRef.value?.remoteOptions
  console.log('options', data);
}
</script>

<template>
  <RemoteSelect
    ref="remoteSelectRef"
    v-model="selectValue"
    url="/test/getuserlist"
    query="?page=1&pageSize=100"
    option-label="username"
    option-value="userId"
    :is-list="false"
    result-key="records"
    is-string
    mutiple
    :clearable="false"
    :text-type="false"
    @change="onSelectChange"
    @request-done="onSelectRequestDone"
  ></RemoteSelect>
</template>

全局引入

在 main.ts 引入

import ElRemoteSelect from '@corgicoding-el/remote-select';
import '@corgicoding-el/remote-select/style.css';

app.use(ElRemoteSelect);

场景说明

列表使用

由于列表接口一般为 records 包在 res.data.result 内，且传参为 pageSize=-1 时，能返回所有列表数据。

RemoteSelect 可以使用 isList 直接获取到作为列表接口的返回

<script setup>
import { RemoteSelect } from '@corgicoding-el/remote-select';
// import '@corgicoding-el/remote-select/style.css';

const selectValue = ref < any > [];
</script>

<template>
  <RemoteSelect
    v-model="selectValue"
    url="/test/getuserlist"
    option-label="username"
    option-value="userId"
    :is-list="true"
  ></RemoteSelect>
</template>

其他 result 字段

也可以使用 result-key 直接选中返回的某个字段，配合 query 参数

<script setup>
import { RemoteSelect } from '@corgicoding-el/remote-select';
// import '@corgicoding-el/remote-select/style.css';

const selectValue = ref < any > [];
</script>

<template>
  <RemoteSelect
    v-model="selectValue"
    url="/test/getuserlist"
    query="?page=1&pageSize=-1"
    option-label="username"
    option-value="userId"
    result-key="records"
  ></RemoteSelect>
</template>

多选

将 multiple 设置为 true

逗号数组

将 isString 设置为 true，组件将自动将绑定的值转化为 , 分割的字符串

文本显示

为满足 @corgicoding-el/data-form-grid 功能的详情功能，将 textType 设置为 true 则自动转化当前模式为文本模式，非下拉模式

原生 element-plus 使用

文档： https://element-plus.org/zh-CN/component/select.html

• 所有 element-plus 的 select 参数属性直接直接绑定在组件元素上
• 所有 element-plus 的 select 事件可以通用 eventOptions 进行绑定

<RemoteSelect
  v-model="selectValue"
  url="/test/getuserlist"
  query="?page=1&pageSize=-1"
  option-label="username"
  option-value="userId"
  result-key="records"
  :event-options="{
    change: () => {}
  }"
></RemoteSelect>