elementui select

ElementUI Select 组件使用指南

ElementUI 是基于 Vue.js 的组件库，其中 Select 组件用于提供下拉选择功能。以下是常见用法和配置方法。

基础用法

通过 v-model 绑定选中值，options 数据通过 el-option 子组件传递：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    }
  }
}
</script>

禁用状态

设置 disabled 属性可禁用选择框：

<el-select v-model="selectedValue" disabled>
  <!-- options -->
</el-select>

可清空选项

添加 clearable 属性允许清空已选项：

<el-select v-model="selectedValue" clearable>
  <!-- options -->
</el-select>

多选模式

设置 multiple 属性启用多选：

<el-select v-model="selectedValues" multiple>
  <!-- options -->
</el-select>

分组显示

使用 el-option-group 实现选项分组：

<el-select v-model="selectedValue">
  <el-option-group
    v-for="group in options"
    :key="group.label"
    :label="group.label">
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-option-group>
</el-select>

远程搜索

结合 filterable 和 remote 实现远程搜索：

<el-select
  v-model="selectedValue"
  filterable
  remote
  :remote-method="fetchOptions"
  :loading="loading">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

自定义模板

通过 slot 自定义选项显示内容：

<el-select v-model="selectedValue">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6">{{ item.value }}</span>
  </el-option>
</el-select>

常用属性

属性	说明	类型	默认值
v-model	绑定值	string/number/boolean/object	-
multiple	是否多选	boolean	false
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
filterable	是否可搜索	boolean	false
placeholder	占位文本	string	-
size	输入框尺寸	string	-

事件处理

常用事件包括：

• change：选中值变化时触发
• visible-change：下拉框出现/隐藏时触发
• remove-tag：多选模式下移除tag时触发

<el-select 
  v-model="selectedValue" 
  @change="handleChange">
  <!-- options -->
</el-select>

以上是 ElementUI Select 组件的主要功能和用法，可根据实际需求选择合适的配置方式。