Header

示例

基本使用

<template>
  <div>
    <SuperSelect v-model="value" :options="options" width="200px"></SuperSelect>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

leable添加前缀

<template>
  <div>
    <SuperSelect v-model="value" :options="options" width="200px" prefix></SuperSelect>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

对象类型数据

<template>
  <div>
    <SuperSelect v-model="value" :options="options" width="200px" valueIsObject></SuperSelect>
    <div>value选中的值: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

禁用状态

<template>
  <div>
    <div>全部禁用</div>
    <SuperSelect v-model="value" :options="options" width="200px" disabled></SuperSelect>
    <div>选项禁用</div>
    <SuperSelect v-model="value" :options="options" width="200px" :disabled="isDisabled"></SuperSelect>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

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

const isDisabled = (item: { value: string }) => {
  return item.value === '2'
}
</script>

多选功能

<template>
  <div>
    <SuperSelect v-model="value" :options="options" multiple width="200px"></SuperSelect>
    <div>value选中的值: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

多选添加添加全选按钮

<template>
  <div>
    <div>添加全选按钮</div>
    <SuperSelect
      v-model="value"
      :options="options"
      width="200px"
      multiple
      hasCheckAll
      valueIsObject
    ></SuperSelect>
    <div>未添加全选按钮</div>
    <SuperSelect
      v-model="value"
      :options="options"
      width="200px"
      multiple
      valueIsObject
    ></SuperSelect>

    <div>value选中的值: {{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]
</script>

collapse-tags 和 collapse-tags-tooltip 多选功能

<template>
  <div>
    <div>collapse-tags</div>
    <SuperSelect
      v-model="value"
      :options="options"
      multiple
      collapse-tags
      hasCheckAll
      width="200px"
    ></SuperSelect>
    <div>collapse-tags + collapse-tags-tooltip</div>
    <SuperSelect
      v-model="value"
      :options="options"
      multiple
      collapse-tags
      collapse-tags-tooltip
      hasCheckAll
      width="200px"
    ></SuperSelect>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const options = [
  { 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>
  <div>
    <SuperSelect
      v-model="value"
      useVirtual
      :options="options"
      width="200px"
    ></SuperSelect>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const options = ref(
  Array.from({ length: 1000 }).map((_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}${idx}`,
  })),
)
</script>

API

Props

参数	说明	类型	可选值	默认值
modelValue	绑定值	string | number | Array<any> | Record<string, any>	-	-
useVirtual	是否使用虚拟列表	boolean	true | false	false
options	选项数据源	Array<any>	-	-
labelKey	自定义label字段属性名	string	-	label
valueKey	自定义value字段属性名	string	-	value
prefix	是否使用前缀	boolean | ((item: any) => boolean)	-	-
disabled	是否禁用	boolean | ((item: any) => boolean)	-	-
filterable	是否可搜索	boolean	true | false	false
hasCheckAll	是否显示全选	boolean	true/false	false
valueIsObject	值是否为对象	boolean	true/false	false

Slots

插槽名	说明
header	下拉列表顶部的内容