详细分析Element中的el-select（附代码）

1. 基本知识

el-select 是 Element UI 中的一个选择器组件，用于提供下拉框选择功能

常用形式一：

<el-form-item label="选项">
  <el-select v-model="value" placeholder="请选择">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</el-form-item>

截图如下：

常用形式二：（结合数组进行遍历）

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

参数解释大致如下：

• v-model="selectedOptions"：selectedOptions是Vue实例中定义的变量，用于存储所选选项的值
• v-for="option in options"：Vue的循环指令，用于遍历options数组中的每个选项。
• :key="option.value"：:标识v-for循环中的每个选项
• :label="option.label"：设置选项的显示文本
• :value="option.value"：设置选项的值

2. 参数选择

下面参数可自由组合

2.1 多选

<el-form-item label="选项">
  <el-select v-model="value" multiple placeholder="请选择">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</el-form-item>

2.2 禁用

<el-form-item label="选项">
  <el-select v-model="value" disabled>
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</el-form-item>

2.3 搜索

<el-form-item label="选项">
  <el-select v-model="value" filterable  placeholder="请选择">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</el-form-item>

2.4 清空

<el-form-item label="选项">
  <el-select v-model="value" placeholder="请选择" clearable="">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</el-form-item>

2.5 分组

<el-form-item label="选项">
  <el-select v-model="value" placeholder="请选择">
    <el-option-group label="分组一">
      <el-option label="选项一" value="option1"></el-option>
    </el-option-group>
    <el-option-group label="分组二">
      <el-option label="选项二" value="option2"></el-option>
    </el-option-group>
  </el-select>
</el-form-item>

2.6 自定义内容

<el-form-item label="选项">
  <el-select v-model="value" placeholder="请选择">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2">
      <span style="color: red;">选项2.2</span>
    </el-option>
  </el-select>
</el-form-item>

2.7 自定义过滤

<el-select v-model="value" placeholder="请选择" filterable :filter-method="customFilterMethod">
  <el-option label="选项一" value="option1"></el-option>
  <el-option label="选项二" value="option2"></el-option>
</el-select>

添加 filterable 属性使得可以自定义过滤方法

3. 实战Demo

一般会结合事件响应，其数据也不会放在此处，不然会过于冗余

配合事件响应时，可以使用@change事件来监听el-select的变化，并在发生变化时执行相应的操作

<el-select v-model="selectedOptions" placeholder="请选择" @change="handleSelectChange">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

添加了@change事件监听器，指向了一个方法handleSelectChange

在Vue实例中，需要定义这个方法来处理el-select的变化：

new Vue({
  el: '#app',
  data: {
    selectedOptions: [], // 用于存储选择的选项值的数组
    options: [ // 下拉选项数组
      { label: '选项一', value: 'option1' },
      { label: '选项二', value: 'option2' },
      // 可以继续添加更多选项
    ]
  },
  methods: {
    handleSelectChange(value) {
      console.log('选中的选项值:', value);
      // 在这里可以对选中的选项值进行任何操作
    }
  }
});

在handleSelectChange方法中，value参数代表了当前选中的选项值，可以在这个方法中进行任何操作，比如更新数据、发送请求等等。