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>