element ui 下拉框绑定对象

Posted 2020-11-16 lhl66

废话不说直接上代码说明真相。

<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>