element ui 下拉框绑定对象而且change传多个参数

废话不说直接上代码说明真相。 <template>
  <div class="hello">
    <span>能够设置的属性 value-key="id" 、value-key="name"</span>
    <el-select placeholder="请选择" value-key="id" v-model="selectValue" @change="changeStatus">
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script> export default { name: "HelloWorld", data() { return { selectValue: {}, list: [ { id: 1, name: "测试1" }, { id: 2, name: "测试2" }, { id: 3, name: "测试3" } ] }; }, methods: { changeStatus(val) { console.log(val, "val"); // val获得的是当前选中的对象接下来对于你的变态传参事情就好办多了。
 } } }; </script>


<style scoped>

</style>

 

<template>
  <div class="hello">
    <span>能够设置的属性 value-key="id" 、value-key="name"</span>
    <el-select placeholder="请选择" value-key="id" v-model="selectValue" @change='(val)=>selectChange(val,vIndex)'>
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script> export default { name: "HelloWorld", data() { return { selectValue: {}, list: [ { id: 1, name: "测试1" }, { id: 2, name: "测试2" }, { id: 3, name: "测试3" } ], vIndex: 1 }; }, methods: {

     // 还可使用：第一个参数是默认的value参数，第二个是咱们本身想传入的参数 @change='selectChange($event,vIndex)'

 selectChange(val,vIndex) { console.log(val, "val",vIndex,'vIndex'); } } }; </script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>