el-select的change事件添加自定义参数

1,757 阅读2分钟

一、问题:

在elementUI的开发过程中,有时候会经常遇到,在已定义好的change事件中,想要传递一些自定义的数据,应该怎么解决?

二、解决方案:

1、select标签的change事件 正常情况:默认返回的是目前选中的值。

特殊情况:要传递自定义参数index呢?就需要用到$event,来获取默认的值,然后再其后面来实现对自定义参数的传递。

注:【该$event是指当前触发的是什么事件(鼠标事件,键盘事件等)】

2、InputNumber计数器中的change事件

正常情况:默认返回的是newValue,oldValue

特殊情况:要传递自定义参数index呢?需要用到箭头函数来变通,实现自定义参数的传递。

三、具体案例: 案例1、select标签的change事件

【准备数据】

在data中定义select标签选项中的数据为options数组。数据格式如下:

data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }

【正常情况】

<template>模板中使用select标签来显示下拉选项,绑定change事件为selectedItem。代码如下:

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

在methods方法中,定义selectedItem方法,来实现与标签change事件的响应。代码如下:

    selectedItem(e){
      console.log("你选择了:",e)
    },

页面效果为:

image.png

当然,你也可以直接传递对象形式的。代码的具体变化如下:

image.png

【特殊情况】

传递自定义的参数。以上面数据为例,如果想同时传递一个自定义index值,该如何去做呢?

1.更改标签事件中的绑定事件的写法:

image.png

2.更改绑定事件中参数传递的数量:

image.png

输出结果为:

image.png

<>案例2、InputNumber计数器中的change事件

【正常情况】

image.png

页面效果:

image.png

【特殊情况】

image.png

页面效果:

image.png