vue+elementUI下拉框回顯問題及解決方式
vue elementUI下拉框回顯問題
在開發(fā)過程中,總會做到修改功能,但是在修改回顯的時(shí)候,發(fā)現(xiàn)下拉框始終回顯的是id而不是文本
下面看案例
正確回顯格式應(yīng)該是這樣
而回顯的確實(shí)這個值的id
原因是因?yàn)樵诮oselect復(fù)制的時(shí)候沒有重新渲染,一開始我的編輯回顯方法是這樣
// 編輯回顯 edit() { // 通過選中id查詢信息 axios.get('/xxx/xxx/id', { params: { id: this.selectedRows[0].ID } }).then((reponse) => { // 然后直接賦值到表單上 this.recordFrom = reponse.data.data[0] }) // 打開表單頁面 this.editRecordDialog = true }
直接將查詢的數(shù)據(jù)賦值到表單中,只會賦值返回回來的值,如果v-model綁定的值是id,則只會顯示id,如果綁定的值是name,則只會顯示name。
所以,給表單賦值的時(shí)候需要重新渲染一下下拉框
給賦值之后下面增加了一個查詢下拉框的方法
// 編輯回顯 edit() { // 通過選中id查詢信息 axios.get('/xxx/xxx/id', { params: { id: this.selectedRows[0].ID } }).then((reponse) => { // 然后直接賦值到表單上 this.recordFrom = reponse.data.data[0] }) // 重新查詢下拉框方法 this.getNumber2() // 打開表單頁面 this.editRecordDialog = true }
查詢方法代碼:
// 查詢版本號到下拉框 getNumber2() { axios.get('xxx/xxx/number', { params: { id: this.proNameSelect } }) .then((reponse) => { var obj = reponse.data.data for (var i = 0; i < obj.length; i++) { this.options5.push({ value: obj[i].ID, label: obj[i].versionNumber }) } }) }
這里附上下拉框的代碼:
<el-form-item label="版本號" prop="verID"> <el-select class="select-type" v-model="recordFrom.verID" placeholder="請選擇版本號"> <el-option v-for="item in options5" :key="item.ID" :label="item.versionNumber" :value="item.ID"> </el-option> </el-select> </el-form-item>
重新渲染之后,就可以正?;仫@啦!
vue下拉框回顯映射
大家在做項(xiàng)目的時(shí)候,應(yīng)該非常的容易遇到,下拉框的回顯問題吧?包括單選框,復(fù)選框,級聯(lián)框的回顯
如果使用組件的話,比如element-UI,他們內(nèi)部有自己的映射方法,將id傳過去自己能回顯到下拉框中,還是挺方便的,可是如果給一個id 讓你映射出他所對應(yīng)的名字,你要怎么辦呢?讓我們一起來看看吧?
單選框
- 后端返回的:
value: '選項(xiàng)1'
- 下拉數(shù)組:
options: [{ ? ? ? ? ? value: '選項(xiàng)1', ? ? ? ? ? label: '黃金糕' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)2', ? ? ? ? ? label: '雙皮奶' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)3', ? ? ? ? ? label: '蚵仔煎' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)4', ? ? ? ? ? label: '龍須面' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)5', ? ? ? ? ? label: '北京烤鴨' ? ? ? ? }], // 映射方法 formatterName(options, value) { ? let obj = {} ? obj = options.find(item => item.value=== value) ? return obj.label }, ? // 輸出: ? 黃金糕 ? ?
多選框
- 后端返回的:
value: ['選項(xiàng)2,選項(xiàng)4']
- 下拉數(shù)組:
options: [{ ? ? ? ? ? value: '選項(xiàng)1', ? ? ? ? ? label: '黃金糕' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)2', ? ? ? ? ? label: '雙皮奶' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)3', ? ? ? ? ? label: '蚵仔煎' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)4', ? ? ? ? ? label: '龍須面' ? ? ? ? }, { ? ? ? ? ? value: '選項(xiàng)5', ? ? ? ? ? label: '北京烤鴨' ? ? ? ? }], // 映射方法 formatterName(options, value, idArr = []) { ? if (typeof options=== 'object') { ? ? ?for (let i = 0; value[i] !== undefined; i++) { ? ? ? ?for (let j = 0; options[j] !== undefined; j++) { ? ? ? ? ?if (value[i] === options[j].value) { ? ? ? ? ? ?idArr.push(options[j].label) ? ? ? ? ?} ? ? ? ?} ? ? ?} ? ?} ? ?return idArr }, ? // 輸出: ? ['雙皮奶','龍須面']
級聯(lián)框
- 后端返回的:
value: ['zhinan','shejiyuanze','fankui']
- 下拉數(shù)組:
options: [{ ? value: 'zhinan', ? label: '指南', ? children: [{ ? ? value: 'shejiyuanze', ? ? label: '設(shè)計(jì)原則', ? ? children: [{ ? ? ? value: 'yizhi', ? ? ? label: '一致' ? ? }, { ? ? ? value: 'fankui', ? ? ? label: '反饋' ? ? }, { ? ? ? value: 'xiaolv', ? ? ? label: '效率' ? ? }, { ? ? ? value: 'kekong', ? ? ? label: '可控' ? ? }] ? }] // 映射方法 formatterName(options, value, idArr = []) { ? if (typeof options === 'object') { ? ? for (let i = 0; value[i] !== undefined; i++) { ? ? ? for (let j = 0; options[j] !== undefined; j++) { ? ? ? ? if (value[i] === options[j].value) { ? ? ? ? ? idArr.push(options[j].label) ? ? ? ? } ? ? ? } ? ? } ? ? for (let i = 0; options[i] !== undefined; i++) { ? ? ? this.formatterName(options[i].children, value, idArr) ? ? } ? } ? return idArr }, ? // 輸出: ? ['指南','設(shè)計(jì)原則','反饋']
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3項(xiàng)目中配置sass,vite報(bào)錯Undefined mixin問題
這篇文章主要介紹了vue3項(xiàng)目中配置sass,vite報(bào)錯Undefined mixin問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue項(xiàng)目回到頂部的兩種超簡單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目回到頂部的兩種超簡單實(shí)現(xiàn)方法,?頁面切換回到頂部是一個很常見的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue中g(shù)etters的使用與四個map方法的使用方式
這篇文章主要介紹了vue中g(shù)etters的使用與四個map方法的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01Vue項(xiàng)目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項(xiàng)目環(huán)境搭建總結(jié)篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Vue.js使用this.$confirm換行顯示提示信息實(shí)例
在編寫Web應(yīng)用時(shí),實(shí)現(xiàn)多行文本顯示通常需要用到HTML標(biāo)簽或JavaScript特定函數(shù),本文介紹了如何使用JavaScript的$createElement函數(shù)來創(chuàng)建多行文本顯示,$createElement可以創(chuàng)建任何HTML標(biāo)簽,使得在JavaScript中控制HTML輸出更加靈活,通過簡單的代碼示例2024-10-10Vue2.x中的父子組件相互通信的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue2.x中的父子組件相互通信,需要的朋友可以參考下2017-05-05