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を楽しく手に入れることができます...