elementUI实现在选择下拉框时同时存储id和name

要实现如图中选择焊装车间后，将车间id和name同时保存。
在html中：

  <el-form-item label="车间" prop="workshopName">
    <el-select v-model="dataForm.workshopName" placeholder="请选择" @change="workshopCurrentHandle" clearable>
      <el-option v-for="item in workshops" :key="item.id" :label="item.workshopName" :value="item" ></el-option>
    </el-select>
  </el-form-item>

其中，下拉框显示name，选择name，保存的值是item
data中写一个数组 workshops: [],
dataform中定义 workshopId: '', 和 workshopName: '',
methods中 init 初始化 getWorkshops()
最后方法体写成

// 获取车间信息
getWorkshops () {
  this.$http.get('/basic/workshop/list').then(({ data: res }) => {
    if (res.code !== 0) {
      return this.$message.error(res.msg)
    }
    this.workshops = res.data
  }).catch(() => {
  })
},
// 绑定车间
workshopCurrentHandle (value) {
  this.dataForm.workshopId = value.id
  this.dataForm.workshopName = value.workshopName
},