Tui Plus Vapor

Appearance

# t-select-option

SelectOption 选择项

t-select-option 组件介绍 ​

t-select-option 是下拉选择的子级组件，用于定义下拉菜单中的选项，必须配合 t-select 使用。

t-select-option 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-select-option 基础用法 ​

基础用法参考 demo/select/select.uvue，作为 t-select 的子组件使用。

vue
<template>
	<t-page class="p-15 f ov">
		<t-card title="提示"
				class="mb-15"
				type="error"
				sub-title="要注意层级控制，层级写在组件内部在安卓端不生效，请注意参考官方文档正确使用（https://doc.dcloud.net.cn/uni-app-x/css/z-index.html）"></t-card>
		<t-section title="多选"
				   class="mb-15"></t-section>
		<view :class="[`trm tpm tvg mb-15`]">
			<t-text>{{val.join('-')}}</t-text>
		</view>
		<t-select :class="`z-1000 ov`"
				  v-model="val"
				  size="large"
				  @change="selectchange">
			<t-select-option v-for="(item,index) in options"
							 :key="index"
							 :label="item.label"
							 :value="item.value"></t-select-option>
		</t-select>
		<t-button type="primary"
				  class="mt-15"
				  @click="test">双向绑定测试</t-button>
		<t-section title="单选"
				   class="mb-15"></t-section>
		<view :class="[`trm tpm tvg mb-15`]">
			<t-text>{{val1}}</t-text>
		</view>
		<t-select :class="`z-3 ov`"
				  v-model="val1"
				  size="large"
				  @change="selectchange1">
			<t-select-option v-for="(item,index) in options"
							 :key="index"
							 :label="item.label"
							 :value="item.value"></t-select-option>
		</t-select>
		<t-button type="primary"
				  class="mt-15"
				  @click="test1">双向绑定测试</t-button>
		<view class="h-250"></view>
		<tui-theme-switch></tui-theme-switch>
	</t-page>
</template>
<script setup>
	const val = ref<string[]>(['选项1', '选项3'])
	const val1 = ref<string>('选项3')
	type SelectOptions = {
		value : string
		label : string
		disabled ?: boolean
	}
	const options = ref<SelectOptions[]>([])
	function test() {
		val.value = ['选项4', '选项5']
	}
	function test1() {
		val1.value = '选项4'
	}
	function selectchange1(e : any) {
		console.log(e)
	}
	function selectchange(e : any) {
		console.log(e)
	}
	onReady(() => {
		//模拟接口请求
		setTimeout(() => {
			options.value = [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶',
				disabled: true
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}, {
				value: '选项11',
				label: '北京烤鸭1'
			}, {
				value: '选项6',
				label: 'A选项6'
			}, {
				value: '选项7',
				label: 'A选项7'
			}, {
				value: '选项8',
				label: 'A选项8'
			}, {
				value: '选项9',
				label: 'A选项9'
			}, {
				value: '选项10',
				label: 'A选项10'
			}] as SelectOptions[]
		}, 300)
	})
</script>

t-select-option Props ​

属性名说明类型默认值
value选项的值string''
label选项的标签文本string''
path点击组件后跳转的页面路径string''
hover是否启用点击效果booleanfalse
type组件主题类型string''
disabled是否禁用booleanfalse
effect组件显示主题string''
size组件尺寸string'medium'

t-select-option Events ​

事件名说明回调参数
click点击时触发-