Select 选择器

常用于选择选项的场景。

注意

pa-select 可独立使用，在 pa-form/pa-table 中可使用时，需配置 prop 字段。

组件功能展示

基础使用

基础使用

Display

选项1

异步请求选项

<template>
  <pa-title :padding="['bottom']">基础使用</pa-title>
  <pa-select v-model="value1" :exOptions="exOptions" :title="{ 'en-US': 'Basic Usage', 'zh-CN': '基础使用' }"></pa-select>

  <pa-title :padding="['bottom']">Display</pa-title>
  <pa-select v-model="value1" :exOptions="exOptions" display></pa-select>

  <pa-title class="mt10" :padding="['bottom']">异步请求选项</pa-title>
  <pa-select v-model="value2" :requestApi="remoteMethodFn" type="online-select"></pa-select>
</template>

<script lang="ts" setup>
import { MOptionV2Type } from "@/package/components/manager-type";
import { ref } from "vue";
const value1 = ref(1);
const value2 = ref(3);

const exOptions = ref([
  { label: "选项1", value: 1 },
  { label: "选项2", value: 2 }
]);

async function remoteMethodFn({ query }): Promise<MOptionV2Type.SelectList> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { label: `选项${query}-1`, value: 3 },
        { label: `选项${query}-2`, value: 4 }
      ] as MOptionV2Type.SelectList);
    }, 1000);
  });
}
</script>

<style></style>

显示代码

SaSelectType

字段	描述	类型	默认值
modelValue	绑定值	Array<number | string> number string	—
displayValue	纯展示类型下，直接显示值	string	—
type	组件类型	multiple-online-select multiple-request-select multiple-select online-select request-select select	select
exOptions	选项	MOptionV2Type.SelectList	—
requestApi	异步选项请求接口	({ query: string }) => Promise<MOptionV2Type.SelectList>	—
placeholder	输入框提示	Record<"en-US" | "zh-CN", string> string	—
disabled	禁用状态	boolean	false
display	纯展示	boolean	false
clearable	显示清除按钮	boolean	true
contrastData	对比用原数据	Array<number | string> number string	—
alwaysContrast	是否总是显示对不数据	boolean	false

request-select 和 online-select 区别

request-select 只会在组件创建时单次调用 requestApi，而 online-select 会在输入框值变化时调用 requestApi

SaSelectEvents

字段	描述	类型
change	当值改变时触发	function

MOptionV2Type.SelectList(Array<SaSelectOptionsType>)

字段	描述	类型	默认值
label	选项名	string
value	选项值	string number boolean
children	子选项	Array<SaSelectOptionsType>
disabled	禁用状态	boolean	false
base	默认数据	any
tagStyle	标签样式	{bgColor?: string, textColor?: string} string