CareUI

# 选择器

# 单选选择器

请选择云解决方案
请选择云产品
<template>
    <div class="demo-block-column">
        <div class="demo-select-row" style="width: 320px">
            <!-- 方式一：使用 options 输出下拉选项。优先级高于 t-option-->
            <t-select v-model="value1" :options="options1" placeholder="请选择云解决方案" />
        </div>
        <div class="demo-select-row" style="width: 320px">
            <!-- 方式二：使用 t-option 输出下拉选项。options 和 t-option 两种实现方式二选一即可 -->
            <t-select v-model="value2" placeholder="请选择云产品">
                <t-option v-for="item in options2" :value="item.value" :label="item.label" :key="item.value"></t-option>
            </t-select>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        value1: '',
        value2: '',
        // 如果此处数据字段不是 label 和 value，而是 name 和 id，则可以传入参数 `keys` 定义别名
        // 示例： <t-select :options="options1" :keys="{ label: 'name', value: 'id' }" />
        options1: [
            { label: '架构云', value: '1' },
            { label: '大数据', value: '2' },
            { label: '区块链', value: '3' },
            { label: '物联网', value: '4', disabled: true },
            { label: '人工智能', value: '5' },
            // 可以使用渲染函数自定义下拉选项内容和样式
            {
            label: '计算场景',
            value: '6',
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            content: (h) => <span>计算场景（高性能计算）</span>,
            },
        ],
        options2: [
            { label: '云服务器', value: '1' },
            { label: '云数据库', value: '2' },
            { label: '域名注册', value: '3' },
            { label: '网站备案', value: '4' },
            { label: '对象存储', value: '5' },
            { label: '低代码平台', value: '6' },
        ],
    };
  },
};
</script>
显示代码 复制代码

# 自定义选择器中的选择器

选项四 选项五 选项六 选项七 
<template>
    <div class="demo-block-column">
        <div class="demo-select-row" style="width: 520px">
            <!-- 自定义选中项内容，valueDisplay 为 插槽(slot) -->
            <t-select v-model="value2" :options="options" placeholder="请选择" multiple clearable class="care-select__multiple">
                <template #valueDisplay="{ value, onClose }">
                    <t-tag v-for="(item, index) in value" :key="index" :closable="true" :onClose="() => onClose(index)">
                    {{ item.label }}
                    </t-tag>
                </template>
            </t-select>
        </div>
        <div class="demo-select-row" style="width: 520px">
            <!-- 自定义选中项内容，valueDisplay 为 插槽(slot) -->
            <t-select v-model="value2" :options="options" placeholder="请选择" multiple clearable class="care-select__multiple">
                <template #valueDisplay="{ value, onClose }">
                    <t-checkbox v-for="(item, index) in value" :key="index" :closable="true" :onClose="() => onClose(index)" :checked="true">
                    {{ item.label }}
                    </t-checkbox>
                </template>
            </t-select>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value2: ['4', '5', '6', '7'],
      options: [
        { label: '小型标签', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' },
        { label: '选项四', value: '4' },
        { label: '选项五', value: '5' },
        { label: '选项六', value: '6' },
        { label: '选项七', value: '7' },
        { label: '选项八', value: '8' },
        { label: '选项九', value: '9' },
      ],
    };
  }
};
</script>
显示代码 复制代码

# 自定义选择器中的选择器

已选择的选项
<template>
    <div class="demo-block-column">
        <div class="demo-select-row" style="width: 520px">
            <t-select
                v-model="value"
                :bordered="false"
                style="width: 200px;"
                placeholder="-请选择-"
                clearable
                :options="options"
            />
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          label: '已选择的选项',
          value: '1',
        },
        {
          label: '短的选项二',
          value: '2',
        },
        {
          label: '选项内容过长的选择器选项',
          value: '3',
        },
      ],
      value: '1',
    };
  },
};
</script>
显示代码 复制代码

← Slider 滑块 →