eleui下el-select组件的绑定对象使用

使用技术：element ui -vue2
内容：关于使用el-select组件绑定一个对象的操作

html

<!-- 使用rules进行校验时，prop必须和:rules保持一致  --> 
<!-- 绑定对象时，必须配置value-key属性，并且value-key与:key保持一致  -->
 <el-form ref="form" :model="form" :rules="rules" label-width="80px">  
     <el-form-item label="员工" prop="id" > 
       <el-select
         v-model="form.peopleObj"
         value-key="id"
         placeholder="请选择工号"
         clearable
         filterable
         style="width: 100%"
         @change="changeHandler" 
       > 
         <el-option
           v-for="item in peoList"
           :key="item.id"
           :label="item.name"
           :value="item"
         />
       </el-select>
     </el-form-item>
</el-form>                  

js

 //...
 	  form: {
        peopleObj: { 
          name: "",
          age: "",
          id: "",
        },
        name: "",
        age: "",
        id: "",
      }, 
      // 表单校验
      rules: {
        "id": [
          { required: true, message: "请选择工号", trigger: "change"},
        ]
      },
 //...
 
 /* 切换工号，实时修改工号编码 */
    changeHandler(val){
      // 下拉选绑定的对象，由于vue框架深度监视的原因，导致obj里id变换，vue未识别到，组件value更新，但label未更新
      this.$forceUpdate() //强制更新label
      this.form.id= val.id
      this.form.name= val.name
      this.form.age= val.age
    },
 //...