GSelect 下拉选择

所有属性都继承自element-plus

基础用法

<template>
  <g-select v-model="val" :options="options"></g-select>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GSelect } from 'gao-components-plus';

const val = ref()
const options = ref([
  {label: '选项1', value: 1},
  {label: '选项2', value: 2},
  {label: '选项3', value: 3},
  {label: '选项4', value: 4},
  {label: '选项5', value: 5},
  {label: '选项6', value: 6},
])


</script>

动态加载选项

<template>
  <g-select v-model="val" :api="getList"></g-select>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { type GSelectOptions, GSelect } from 'gao-components-plus'

const val = ref()


function getList() {
  return new Promise<GSelectOptions>(resolve => {
    setTimeout(() => {
      resolve(new Array(Math.floor(Math.random() * 20)).fill(0).map(() => ({
        label: `选项` + Math.random(),
        value: Math.random()
      })))
    }, 1000);
  })
}


</script>

选项重新加载

<template>
  formData.name === {{ formData.name }}
  <g-select class="my-1" v-model="val" :api-watch="[() => formData.name]" :api="getList"></g-select>
  <g-button type="primary" @click="formData.name = String(Math.random())">改变formData.name</g-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { type GSelectOptions, GSelect, GButton } from 'gao-components-plus'

const val = ref()
const formData = ref({
  name: '张三'
})


function getList() {
  return new Promise<GSelectOptions>(resolve => {
    setTimeout(() => {
      resolve(new Array(Math.floor(Math.random() * 20)).fill(0).map(() => ({
        label: `${formData.value.name}===` + Math.random(),
        value: Math.random()
      })))
    }, 1000);
  })
}


</script>

属性

除以下属性外，其他属性都继承自element-plus

名称	描述	类型	默认值
options	下拉框数据	Object	-
api	远程获取下拉框数据	() => Promise<GSelectOptions>	-
api-watch	获取数据监听的数组，数组内容发生变化，会重新获取数据	`Array<Ref	ComputedRef