element-uiは、el-select選択オブジェクトの複数の属性値を同時に取得します.
2447 ワード
<el-form-item label=" :" prop="userRoleId">
<el-select v-model="form.userRoleId" placeholder="- -" @change="pickRoleName">
<el-option
v-for="(item,index) in userRoleList"
:key="item.id"
:label="item.roleName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
この需要があるのはitemを使うからだ.roleNameはユーザー情報を表示し、item.idは非同期リクエストにも使用されます.しかし、valueは1つの値しかバインドできません.上のコードに示すように、
:value="item.id""
はidをバインドしています.roleNameを使用するにはどうすればいいですか.何を考えても理解できず、同僚に教えてもらっても成果がなく、最後にネット上でやっと解決方法を見つけた!el-selectというノードでchangeイベントをバインドし、選択したid値によってデータソースにroleNameをフィルタする.
methods: {
pickRoleName(vId){
let obj = {};
obj = this.$store.state.user.userRoleList.find((item)=>{// userRoleList
return item.id === vId;//
});
this.form.roleName = obj.roleName;
}
}
それから、formからroleNameを楽しく手に入れることができます...