element-ui el-select 选中的value值为对象 value-key使用

 

select option绑定的value为对象时会出现问题：无法正确显示选中的值，选项全部为蓝色

 

这个是因为：官方文档里面有写 Element文档 

value-key

作为 value 唯一标识的键名，绑定值为对象类型时必填

string

—

value

 

所以我们要在el-select 标签里面加上 value-key="id"（  id是选项数据的字段）

<el-select v-model="value" placeholder="请选择" @change="getchang" value-key="id" >
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item">
        </el-option>
      </el-select>

 

 getchang(value) {        
      console.log("选中值的id",value.id);
      console.log("选中值的name",value.name);
      },