TSelect / 选择器

Select for choosing from a list of options. Supports single/multiple selection, validation states, prefix/suffix text, and various sizes. / 下拉选择器用于从选项列表中选择值，支持单选/多选、验证状态、前后缀文本和多种尺寸。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
options	(SelectOption | string | number)[]	—	Option array / 选项数组
placeholder	string	—	Placeholder text
size	'sm' | 'lg'	—	Size
disabled	boolean	false	Disabled
multiple	boolean	false	Multiple selection / 多选
validation	'valid' | 'invalid'	—	Validation state
block	boolean	false	Full width
prependText	string	—	Prefix text / 前置文本
appendText	string	—	Suffix text / 后置文本
required	boolean	false	Required

SelectOption 接口

interface SelectOption {
  value: string | number
  label: string
  disabled?: boolean
}

Options also accept plain string or number values (converted to { label: value, value }).

v-model

v-model	Type / 类型	Description / 说明
v-model	string | number | string[]	Selected value / 选中值

Basic Usage / 基础用法

<script setup lang="ts">
import { TSelect } from '@gulcc/tabler-vue'

const city = ref('')
const cityOptions = [
  { label: 'Beijing / 北京', value: 'beijing' },
  { label: 'Shanghai / 上海', value: 'shanghai' },
  { label: 'Guangzhou / 广州', value: 'guangzhou' },
]
</script>

<template>
  <TSelect v-model="city" :options="cityOptions" placeholder="Select city / 请选择城市" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TSelect } from '@gulcc/tabler-vue'

const tags = ref<string[]>([])
const frameworks = [
  { label: 'Vue.js', value: 'vue' },
  { label: 'React', value: 'react' },
  { label: 'Angular', value: 'angular', disabled: true },
  { label: 'Svelte', value: 'svelte' },
]
</script>

<template>
  <!-- Multiple select / 多选 -->
  <TSelect v-model="tags" :options="frameworks" multiple placeholder="Select frameworks / 选择框架" />

  <!-- With prefix/suffix text / 带前后缀 -->
  <TSelect
    v-model="domain"
    :options="domainOptions"
    prepend-text="https://"
    append-text=".com"
  />

  <!-- Validation / 验证 -->
  <TSelect
    v-model="country"
    :options="countryOptions"
    placeholder="Select country / 请选择国家"
    validation="invalid"
  />

  <!-- Sizes / 尺寸 -->
  <div class="d-flex gap-2">
    <TSelect v-model="val1" :options="opts" size="sm" placeholder="Small / 小" />
    <TSelect v-model="val2" :options="opts" placeholder="Default / 默认" />
    <TSelect v-model="val3" :options="opts" size="lg" placeholder="Large / 大" />
  </div>

  <!-- Block / 块级 -->
  <TSelect v-model="value" :options="opts" block />
</template>

Tips / 避坑指南

• Options can be either SelectOption objects { label, value } or plain string/number values
• When multiple=true, v-model binds to string[] (array of selected values)
• Disabled options are rendered as <option disabled> — users can't select them
• block prop adds w-100 class to make the select fill its container width
• String options like ['vue', 'react'] are auto-converted to { label: 'vue', value: 'vue' } internally