千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 深入el-option点击事件

深入el-option点击事件

来源:千锋教育
发布人:xqq
时间: 2023-11-24 07:36:54 1700782614

一、触发点击事件

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


  
      
        
      
  

上面的代码中,我们通过在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子组件来实现。


  
      
        
      
    添加选项  
    删除选项  
  


  
    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-option的disabled属性来禁用选项,在options数组中可以通过为某个元素添加disabled属性来禁用特定的选项。

五、自定义选项模板

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


  
      
        
        {{ item.label }}  
          
        
      
  

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

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT