網站首頁 編程語言 正文
需求-----選中角色后,在input框中顯示,同時需要獲取該用戶的基本信息對象
data () {
return {
receiveUser:{ },
userList:[ ]
}
}
組件使用
<el-select
v-model="receiveUser"
placeholder="請選擇"
clearable
value-key="userId"
@change="selectValue"
>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.username"
:value="item"
></el-option>
</el-select>
select綁定對象,必須綁定 value-key屬性,可以查看文檔說明,不過說明上講解的不詳細,
userList是請求接口獲取到的用戶信息數組,value-key作為對象的唯一標識,是與:key="item.userId"對應的
最后可以查看打印結果
//選中分配人后
selectValue () {
console.log(this.receiveUser) //選中人對象信息
},
而select框中顯示的角色名
2020-10-17
另一種解決思路—通過filter來篩選
select不需要綁定對象,而是通過遍歷數組來篩選
data () {
return {
receiveUserName:' ',
userList:[ ]
}
}
<el-select
v-model="receiveUserName"
placeholder="請選擇"
clearable
@change="selectValue"
>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.username"
:value="item.username"
></el-option>
</el-select>
selectValue () {
let choosenItem = this.userList.filter(item => item.username=== this.receiveUserName)[0];
console.log('choosenItem', choosenItem)
},
原文鏈接:https://blog.csdn.net/weixin_45669668/article/details/109091576
相關推薦
- 2022-09-24 pandas刪除某行或某列數據的實現示例_python
- 2022-10-24 Golang設計模式工廠模式實戰寫法示例詳解_Golang
- 2022-02-21 windows11安裝docker desktop
- 2022-06-15 go語言數組及結構體繼承和初始化示例解析_Golang
- 2023-02-27 ahooks?useInfiniteScroll源碼解析_React
- 2022-04-04 git: git commit時出現 -modified content, untracked co
- 2022-08-18 詳解python?一維、二維列表的初始化問題_python
- 2022-07-15 Python?并行加速技巧分享_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支