深入el-option点击事件

一、触发点击事件

使用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 }}  
        <i class="el-icon-edit" slot="default" @click="handleEdit(item)"></i>  
      </el-option>  
    </el-select>

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

原创文章，作者：WVBBB，如若转载，请注明出处：https://www.506064.com/n/369038.html