element el-select 下拉选中对象

本文章主要是说明element UI 里面的下拉框选中对象的问题 一般来说都是选中的绑定的value(唯一值) 但是value如何绑定对象呢?
1.  设置成对象 :value="item"
2.  要有 value-key=“id”

1.HTML    

 <el-select

            style="width: 200px; margin-left: 20px"

            v-model="valuedd"

             value-key=“id”

            placeholder="请选择"

            @change="ceshi($event)"

          >

            <el-option

              v-for="item in userList"

              :key="item.value"

              :label="item.label"

              :value="item"

            >

            </el-option>

  </el-select>

 

2. JS 返回数据部分（data）

       

 

userList: [

        {

          id: 1,

          userName: "黄金糕",

        },

        {

          id: 2,

          userName: "双皮奶",

        },

        {

          id: 3,

          userName: "蚵仔煎",

        },

        {

          id: 4,

          userName: "龙须面",

        },

        {

          id: 5,

          userName: "北京烤鸭",

        },

      ],

,

 

      valuedd: "",  

　（valuedd不允许放在某个对象里面，如若传输 虚重新赋值）

 

JS  methods 部分
　

 ceshi(val) {

      console.log(val, "对象"); 

    },

打印结果