Vue 下拉框值变动事件传多个参数

在使用 Vue 进行开发时，下拉框值变动事件 @change 是很常用的。

其传参一般分为两种方式：默认传参和自定义传参。

默认传参

@change 默认会传选中项标识的参数，在传参处不用定义，在方法中直接接受即可。

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

<script>
    methods: {
    	onChange(value) {
      	    console.log(value);
    	}
    }
</script>

此时控制台会打印下拉框选中项对应的标识值。

自定义传参

我们经常会遇到需要下拉框传递多个参数的场景，这是需要自定义传参方式。

<template>
	<div v-for="(item, index) in otherFeesList" :key="index" class="item">  
		<el-select v-model="value" placeholder="请选择" @change="onChange($event, index)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
  		</el-select>
    	<el-input v-model="item.unit">
    </div>
</template>

<script>
    methods: {
    	onChange(value, index) {
	    console.log(value);
	    console.log(index);
    	}
    }
</script>

此时控制台会分别打印下拉框选中项对应的标识值和外部标签中的序号值。