使用技术: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 }, //...