EySelect组件示例(推荐使用)

在日常业务中，我们经常会用到 Select，但原组件在某些场景下需要重复处理逻辑，缺少统一封装。

基于此，我在工作中对其进行了二次封装，实现了以下功能：

将这些常见场景抽离，封装成一个更易用的 Select 组件

vue

<template>
  <Form>
    <FormItem label="常规示例">
      <EySelect
        v-model:value="value"
        :el-props="epProps"
        :options="firstOption"
        @change="change"
      />
    </FormItem>
    <FormItem label="api请求返回数据">
      <EySelect
        v-model:value="value"
        :api="api"
        :auto-request="false"
        :el-props="epProps"
      />
    </FormItem>
    <FormItem label="每次点击触发请求">
      <EySelect
        v-model:value="value"
        :api="api"
        :auto-request="false"
        :el-props="epProps"
        always-load
      />
    </FormItem>
    <FormItem label="修改api请求返回数据">
      <EySelect
        v-model:value="value"
        :api="api"
        :el-props="epProps"
        :handler-load-fn="handlerLoadFn"
      />
    </FormItem>
    <FormItem label="下拉分页加载数据">
      <EySelect
        v-model:value="value"
        :api="api"
        always-load
        :el-props="epProps"
        scroll-load
      />
    </FormItem>
    <FormItem label="自带搜索">
      <EySelect
        v-model:value="value"
        :options="OptionLabel2"
        :el-props="{
          style: { width: '100%' },
          fieldNames: { label: 'label2' },
        }"
        scroll-load
      />
    </FormItem>
  </Form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Form, FormItem } from 'ant-design-vue';
import { EySelect } from 'ey-admin';
import { OptionLabel2, firstOption, secondOption } from './config';
const value = ref(undefined);
const epProps = {
  style: { width: '100%' },
};
function change(val) {
  console.log(val);
}

function api(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      //ElSelect开启scroll-load才会有分页数据page_no,page_size
      const page_no = data?.page_no;
      resolve({
        data: page_no === 2 ? secondOption : firstOption,
        total: 14,
      });
    }, 1000);
  });
}

function handlerLoadFn(res) {
  console.log('🚀 ~ handlerLoadFn ~ res:', res);
  return res.data.map(item => ({
    ...item,
    label: `这是修改后的label${item.label}`,
  }));
}
</script>

<style scoped></style>

TIP

若是需要使用api，请确保返回数据格式如下(total字段可在page中修改)

{
    data:any[],
    total:number
}

API

Attributes

成员	说明	类型	默认值
api	异步请求数据的接口	`(data?: Record<string, any>) => Promise<any>`	`-`
value	`Select` 组件接收的值	`string \| number \| array \| object`	`null`
options	下拉选项数组	`SelectProps['options']`	`[]`
elProps	`a-select` 组件的 props	`Partial<SelectProps> & { style?: CSSProperties }`	`{}`
autoRequest	是否在 `mounted` 时自动请求	`boolean`	`true`
alwaysLoad	每次点击都触发加载	`boolean`	`false`
scrollLoad	下拉加载	`boolean`	`false`
handlerLoadFn	拦截返回的值处理函数	`(res: any) => any[]`	`-`
page	分页字段设置详细解析	`TPage`	`undefined`
extraParams	`API` 请求时额外携带的参数	`Record<string, any>`	`{}`

page

一个简单对象，阐述请求时page_no,page_size需要对应使用哪些字段,total_key为返回字段

page={
    page_no_key?: string;
    page_size_key?: string;
    total_key?: string;
}

EySelect组件示例(推荐使用) ​

API ​

Attributes ​

page ​

EySelect组件示例(推荐使用)

API

Attributes

page