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>