# VSelect 组件 API 文档

## 组件简介 | Component Introduction
`VSelect` 是基于 Element Plus 的下拉选择组件，支持分组、插槽自定义等功能。

`VSelect` is a select component based on Element Plus, supporting grouping and custom slots.

---

## Props/属性
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| field  | 选择器配置对象，详见下表 | Object | 是 | - |

### field 对象常用属性 | Common field properties
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| options | 选项列表 | Array | 是 | [] |
| valueKey | 选项对象的唯一标识字段 | String | 否 | 'value' |
| labelField | 选项对象的显示字段 | String | 否 | 'label' |
| childrenField | 分组子项字段 | String | 否 | 'children' |
| ... | 其余 Element Plus el-select 支持的属性 | - | - | - |

---

## v-model
- 绑定值类型：`String | Number | Object`
- 用法：`v-model="selectValue"`

---

## 插槽 | Slots
| 插槽名 | 说明 |
|--------|------|
| prefix | 前缀内容 |
| header | 顶部内容 |
| option | 自定义选项内容 |
| footer | 底部内容 |
| empty | 空内容 |

---

## 方法 | Methods (通过 ref 调用)
| 方法名 | 说明 |
|--------|------|
| focus() | 使选择器聚焦 |
| blur() | 使选择器失焦 |

---

## 示例 | Example
```vue
<template>
  <VSelect v-model="selectValue" :field="fieldConfig" ref="selectRef">
    <template #option="{ label, value }">
      <span>{{ label }} ({{ value }})</span>
    </template>
  </VSelect>
</template>

<script setup>
import { ref } from 'vue'
import { VSelect } from 'your-lib-path'

const selectValue = ref('')
const selectRef = ref(null)
const fieldConfig = {
  options: [
    { label: '选项一', value: '1' },
    { label: '选项二', value: '2' }
  ],
  placeholder: '请选择'
}
</script>