TUI

<template>
  <TsSelect v-model="cityValue" :options="cityList" placeholder="请选择城市" @change="changeCity" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsSelect } from 'tui';
import type { SelectChangeValue } from 'tui/components/select/src/types';

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const cityValue = ref('北京');

const changeCity = (value: SelectChangeValue | null) => {
  console.log('选中的城市：', value);
};
</script>

<template>
  <TsSelect v-model="cityValue" clearable :options="cityList" placeholder="请选择城市" @change="changeCity" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsSelect } from 'tui';
import type { SelectChangeValue } from 'tui/components/select/src/types';

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const cityValue = ref('北京');

const changeCity = (value: SelectChangeValue | null) => {
  console.log('选中的城市：', value);
};
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsSelect style="width: 200px" v-model="disabledValue" :options="cityList" placeholder="禁用状态" disabled />
    <TsSelect style="width: 200px" v-model="disabledOptionValue" :options="cityDisabledList" placeholder="请选择城市" />
  </div>
</template>

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

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const cityDisabledList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州', disabled: true },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
];

const disabledValue = ref('广州');
const disabledOptionValue = ref('');
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsSelect style="width: 200px" filterable multiple clearable v-model="multipleValue" :options="cityList" placeholder="请选择城市" />
  </div>
</template>

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

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const multipleValue = ref(['北京', '上海']);
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsSelect style="width: 200px" filterable v-model="disabledValue" :options="cityDisabledList" placeholder="请选择城市" />
  </div>
</template>

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

const cityDisabledList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州', disabled: true },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
];

const disabledValue = ref('广州');
</script>

<template>
  <TsSelect v-model="errorValue" :options="cityList" placeholder="请选择城市" error />
</template>

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

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const errorValue = ref('');
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsSelect style="width: 200px" v-model="smallValue" :options="cityList" size="small" placeholder="小尺寸" />
    <TsSelect style="width: 200px" v-model="defaultValue" :options="cityList" size="medium" placeholder="默认尺寸" />
    <TsSelect style="width: 200px" v-model="largeValue" :options="cityList" size="large" placeholder="大尺寸" />
    <TsSelect style="width: 200px" v-model="xlargeValue" :options="cityList" size="x-large" placeholder="超大尺寸" />
  </div>
</template>

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

const cityList = [
  { label: '北京', value: '北京' },
  { label: '上海', value: '上海' },
  { label: '广州', value: '广州' },
  { label: '深圳', value: '深圳' },
  { label: '重庆', value: '重庆' },
  { label: '乌鲁木齐', value: '乌鲁木齐' },
];

const smallValue = ref('');
const defaultValue = ref('');
const largeValue = ref('');
const xlargeValue = ref('');
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsSelect style="width: 200px" v-model="customFieldValue" :options="customFieldOptions" :field-names="customFieldNames" placeholder="请选择城市" />
  </div>
</template>

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

const customFieldOptions = [
  { id: 1, name: '北京市', code: 'beijing' },
  { id: 2, name: '上海市', code: 'shanghai' },
  { id: 3, name: '广州市', code: 'guangzhou', disabled: true },
  { id: 4, name: '深圳市', code: 'shenzhen' },
];

// 自定义字段名映射
const customFieldNames = {
  label: 'name', // 显示文本字段
  value: 'id', // 值字段
  disabled: 'disabled', // 禁用状态字段
} as const;

const customFieldValue = ref('');
</script>