一、触发点击事件

使用 element-ui 时，我们经常会使用它的下拉框 el-select 组件，它会包含多个 el-option 子组件，我们可以通过监听 el-select 的 change 事件或者在 el-option 中直接监听 click 事件来触发点击事件。

<el-select v-model="selectedValue" @change="handleChange">  
  <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value" @click="handleClick(item)"></el-option>  
</el-select>  

上面的代码中，我们通过在 el-option 上绑定 @click 事件来监听点击事件，从而触发 handleClick 方法。这种方式相比监听 el-select 的 change 事件具有更高的灵活性。

二、获取选中值

在处理点击事件时，我们通常会需要获取当前所点击的 el-option 的 value 或者 label 值，从而进行后续操作。我们可以通过获取事件对象的 target 属性来获取当前所点击的元素，再进一步获取其绑定的 value 或者 label 值。

handleClick(item) {  
  console.log(item.value);  
  console.log(item.label);  
}  

在上面的代码中，我们传入了 el-option 的 item 对象，通过访问它的 value 和 label 属性来获取当前所选中的值。如果需要获取所选的所有值，我们可以通过在 el-select 上使用 multiple 属性，将获取到的值存储在数组中。

三、动态改变选项

有时，我们需要在运行时动态改变 el-option 的选项，可以通过直接修改 options 数组中的元素，或者通过动态添加或删除 el-option 子组件来实现。

<el-select v-model="selectedValue">  
  <el-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value"></el-option>  
</el-select>  
<el-button @click="addOption">添加选项</el-button>  
<el-button @click="deleteOption">删除选项</el-button>  

data() {  
  return {  
    options: [  
      { label: '选项1', value: 1 },  
      { label: '选项2', value: 2 },  
      { label: '选项3', value: 3 }  
    ],  
    selectedValue: ''  
  }  
},  
methods: {  
  addOption() {  
    this.options.push({ label: '新选项', value: 4 });  
  },  
  deleteOption() {  
    this.options.pop();  
  }  
}  

在上面的代码中，我们通过修改 options 数组来增加或删除选项，由于使用了 v-for 指令来渲染 el-option，因此我们只需修改 options 数组，页面的渲染就会发生相应的变化。

四、禁用选项

有时，我们需要在特定情况下禁用某个选项，我们可以通过给 el-option 绑定 disabled 属性或者在渲染时根据条件动态绑定 disabled 属性来实现。

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

上面的代码中，我们通过 el-option 的 disabled 属性来禁用选项，在 options 数组中可以通过为某个元素添加 disabled 属性来禁用特定的选项。

五、自定义选项模板

另外，我们还可以自定义 el-option 的模板来满足我们的需求。通过设置 el-option 的 slot="default"，我们可以自定义 el-option 显示的内容，并且可以绑定事件来处理点击事件。

<el-select v-model="selectedValue">  
  <el-option v-for="item of options" :key="item.value" :value="item.value">  
    <span>{{ item.label }}</span>  
    <i class="el-icon-edit" slot="default" @click="handleEdit(item)"></i>  
  </el-option>  
</el-select>  

上面的代码中，我们使用了一个 icon 来作为 el-option 的操作按钮，并且通过设置 slot="default" 来自定义 el-option 的内容。如果需要修改样式，我们可以在对应的 class 中添加 CSS 样式来实现。