有用 - el-select @change事件获取整个对象

# el-select @change事件获取整个对象

## AI总结

> 本文主要聚焦在 Vue 开发中 el - select 组件相关操作。通过`@click.native="getCorpAndDept(item)"`给`el - option`绑定原生事件，在`getCorpAndDept`方法中对`form`对象的`corpDept`、`useCorpName`、`useDept`及`useDeptName`等属性进行赋值操作。同时指出相比于使用`value - key`，这种绑定原生事件获取整个对象的方式，不会使`v - model`为对象，从而简化处理流程。

## 代码示例

```html
<el-form-item label="使用人" prop="useBy">
  <el-select ref="useByRef" v-model="form.useBy" filterable placeholder="请输入员工名称"  style="width: 100%"
	no-match-text="请输入员工名称">
	<el-option
	  v-for="item in userList"
	  :key="item.userId"
	  :label="item.nickName"
	  :value="item.userId"
	  @click.native="getCorpAndDept(item)">
	  <div>{{ item.nickName + ' ' + item.dept.deptName}}</div>
	</el-option>
  </el-select>
</el-form-item>
 
 
 
getCorpAndDept(val) {
	this.form.corpDept = '';
	this.useCorpName = '';
	this.form.useDept = val.deptId;
	this.useDeptName = val.dept.deptName;
},
```

使用`@click.native="getCorpAndDept(item)"`  给el-option绑定原生事件，获取整个对象，这样不影响el-select的v-model值；如果使用value-key，会导致v-model也是对象，处理更加麻烦。

## 快照

- https://pic.rmb.bdstatic.com/bjh/3eec3da3a2b/250619/7256f7221eb922c7732e2b348fbfb5b9.png
- https://i3.wp.com/pic.rmb.bdstatic.com/bjh/3eec3da3a2b/250619/7256f7221eb922c7732e2b348fbfb5b9.png
- https://788910.xyz/api/snapshot?p=c1f1c371af73be6784144a389cadf8c6&u=https://pic.rmb.bdstatic.com/bjh/3eec3da3a2b/250619/7256f7221eb922c7732e2b348fbfb5b9.png