选择器 Select

对应 Arco Select：选择框使用灰底填充，默认多选标签为浅色描边。 属性用法见 Element Plus 文档。

基础与尺寸

size 对应三档尺寸，点击输入框打开列表。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const sizes = ['small', 'default', 'large'] as const
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-for="size in sizes" :key="size" v-model="value" :size="size" placeholder="Select a city" style="width: 240px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
  <el-select disabled placeholder="Disabled" style="width: 240px" />
</template>

多选

multiple 展示 Arco 风格的标签，clearable 支持清空。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['London', 'Paris'])
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-model="value" multiple clearable placeholder="Select cities" style="width: 320px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
</template>

分组与禁用选项

el-option-group 展示分组，关闭箭头后面板更接近 Arco。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <el-select v-model="value" :show-arrow="false" placeholder="Select a city" style="width: 240px">
    <el-option-group label="Europe">
      <el-option label="London" value="London" />
      <el-option label="Paris" value="Paris" />
    </el-option-group>
    <el-option-group label="Asia">
      <el-option label="Tokyo" value="Tokyo" />
      <el-option label="Shanghai (unavailable)" value="Shanghai" disabled />
    </el-option-group>
  </el-select>
</template>

自定义标签形态

tag-type、tag-effect 在 Arco 中没有对应项，按主题的 Tag 风格延伸。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['London', 'Paris'])
const options = ['London', 'Paris', 'Tokyo', 'Shanghai']
</script>

<template>
  <el-select v-model="value" multiple tag-type="primary" tag-effect="dark" style="width: 320px">
    <el-option v-for="city in options" :key="city" :label="city" :value="city" />
  </el-select>
</template>

与 Arco 的差异

• 展开时已选值的颜色和当前项高亮保留 Element Plus 行为。
• 多选选项右侧显示对勾，Arco 在左侧显示复选框。
• 默认箭头、tag-type 和 tag-effect 保留 Element Plus 配置语义。