QUI

Appearance

On this page

Select 选择器 ​

基本使用 ​

北京市
Code
vue
<script setup lang="ts">
import { ref, watchEffect } from "vue"
const options = ref([
  {
    label: "北京市",
    value: 1,
  },
  {
    label: "上海市",
    value: 2,
  },
  {
    label: "深圳市",
    value: 3,
  },
  {
    label: "苏州市",
    value: 4,
  },
  {
    label: "南阳市",
    value: 5,
  },
])
const selVal = ref(1)
watchEffect(() => {
  console.log("选中的值:", selVal.value)
})
</script>
<template>
  <q-select :options="options" v-model="selVal" />
</template>

加载更多选项 ​

通过为 select 生成唯一 class 类名后，再获取该类名 dom ，监听其滚动事件。达到页面多个（小于 100 个）select 加载更多时互不影响。

label-1
label-2
Code
vue
<script setup lang="ts">
import { ref } from "vue"

const moreSelVal = ref(1)
const moreSelVal2 = ref(2)
let loading = ref(false)
let loading2 = ref(false)
const modeOptions = ref([
  { id: 1, label: "label-1", value: "1" },
  { id: 2, label: "label-2", value: "2" },
  { id: 3, label: "label-3", value: "3" },
  { id: 4, label: "label-4", value: "4" },
  { id: 5, label: "label-5", value: "5" },
  { id: 6, label: "label-6", value: "6" },
  { id: 7, label: "label-7", value: "7" },
  { id: 8, label: "label-8", value: "8" },
  { id: 9, label: "label-9", value: "9" },
  { id: 10, label: "label-10", value: "10" },
])
const modeOptions2 = ref([
  { id: 1, label: "label-1", value: "1" },
  { id: 2, label: "label-2", value: "2" },
  { id: 3, label: "label-3", value: "3" },
  { id: 4, label: "label-4", value: "4" },
  { id: 5, label: "label-5", value: "5" },
  { id: 6, label: "label-6", value: "6" },
  { id: 7, label: "label-7", value: "7" },
  { id: 8, label: "label-8", value: "8" },
  { id: 9, label: "label-9", value: "9" },
  { id: 10, label: "label-10", value: "10" },
])
// 获取下拉菜单数据
const getList = () => {
  const len = modeOptions.value.length
  if (len >= 50) {
    return
  }
  loading.value = true

  setTimeout(() => {
    for (let index = 1; index <= 10; index++) {
      const val = len + index
      modeOptions.value.push({
        id: val,
        label: `label-${val}`,
        value: val,
      })
    }
    loading.value = false
  }, 1000)
}
</script>
<template>
  <q-select :options="modeOptions" v-model="moreSelVal" :loading="loading" :loadmore="getList" />

  <q-select :options="modeOptions2" v-model="moreSelVal2" :loading="loading2" :loadmore="getList" />
</template>

禁用状态 ​

北京市
Code
vue
<script setup lang="ts">
import { ref } from "vue"
const options = ref([
  {
    label: "北京市",
    value: 1,
  },
  {
    label: "上海市",
    value: 2,
  },
  {
    label: "深圳市",
    value: 3,
  },
  {
    label: "苏州市",
    value: 4,
  },
  {
    label: "南阳市",
    value: 5,
  },
])
const selVal = ref(1)
</script>
<template>
  <q-select :options="options" v-model="selVal" disabled />
</template>

禁用选项 ​

北京市
Code
vue
<script setup lang="ts">
import { ref } from "vue"
const optionsDisabled = ref([
  {
    label: "北京市",
    value: 1,
  },
  {
    label: "上海市",
    value: 2,
    disabled: true,
  },
  {
    label: "深圳市",
    value: 3,
  },
  {
    label: "苏州市",
    value: 4,
  },
  {
    label: "南阳市",
    value: 5,
  },
])
const selVal = ref(1)
</script>
<template>
  <q-select :options="optionsDisabled" v-model="selVal" />
</template>

自定义样式 ​

北京市
Code
vue
<script setup lang="ts">
import { ref } from "vue"
const options = ref([
  {
    label: "北京市",
    value: 1,
  },
  {
    label: "上海市",
    value: 2,
  },
  {
    label: "深圳市",
    value: 3,
  },
  {
    label: "苏州市",
    value: 4,
  },
  {
    label: "南阳市",
    value: 5,
  },
])
const selVal = ref(1)
</script>
<template>
  <q-select :width="180" :height="42" :options="options" v-model="selVal" />
</template>

自定义字段名 ​

北京市
Code
vue
<script setup lang="ts">
import { ref } from "vue"
const optionsCustom = ref([
  {
    id: 1,
    name: "北京市",
  },
  {
    id: 2,
    name: "上海市",
  },
  {
    id: 3,
    name: "深圳市",
  },
  {
    id: 4,
    name: "苏州市",
  },
  {
    id: 5,
    name: "南阳市",
  },
])
const selVal = ref(1)
</script>
<template>
  <q-select :options="optionsCustom" label="name" value="id" v-model="selVal" />
</template>

自定义下拉面板展示数 ​

北京市
Code
vue
<script setup lang="ts">
import { ref } from "vue"
const options = ref([
  {
    label: "北京市",
    value: 1,
  },
  {
    label: "上海市",
    value: 2,
  },
  {
    label: "深圳市",
    value: 3,
  },
  {
    label: "苏州市",
    value: 4,
  },
  {
    label: "南阳市",
    value: 5,
  },
])
const selVal = ref(1)
</script>
<template>
  <q-select :options="options" :max-display="2" v-model="selVal" />
</template>

APIs ​

参数说明类型默认值必传
v-model/modelValue当前选中的 option 项目number | string | nullnullfalse
options选项数据Option[][]false
label字典项的文本字段名string'label'false
value字典项的值字段名string'value'false
placeholder默认文字string'请选择'false
disabled是否禁用booleanfalsefalse
clearable是否支持清除booleanfalsefalse
width宽度number120false
height高度number32false
maxDisplay下拉菜单最多展示的下拉项数，超出滚动显示number7false
loadmore滚动加载更多回调function--false
loading滚动加载更多时的提示状态booleanfalsefalse

Option Type ​

名称说明类型必传
label选项名stringfalse
value选项值string | numberfalse
disabled是否禁用选项booleanfalse
[propName: string]添加一个字符串索引签名，用于包含带有任意数量的其他属性any-

Events ​

事件名称说明参数
change选项值改变后的回调(value: string | number, label: string, index: number) => void

License

Copyright © 2023