Vue element-UI el-select循環(huán)選中的問(wèn)題

更新時(shí)間：2022年10月22日 08:48:26 作者：瘋狂的代碼奴

這篇文章主要介紹了Vue element-UI el-select循環(huán)選中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-UI el-select循環(huán)選中問(wèn)題

由于使用el-checkbox-group多選框循環(huán)包圍著同一個(gè)下拉框，導(dǎo)致下拉框選中后無(wú)法正?；仫@

@change="$forceUpdate()"?

這里使用了$forceUpdate()，使其強(qiáng)制更新視圖，下面是我的源碼

<el-checkbox-group v-for="(item,index) in getMonitorAdd" :key='index' v-model="item.userId" >
?? ?<el-checkbox >{{item.userName}}</el-checkbox>
?? ?<el-select v-model="item.arr" @change="$forceUpdate()" placeholder="請(qǐng)選擇">
?? ??? ?<el-option v-for="items in userTypeSel" :key="items.id" :label="items.code" :value="items.value"></el-option>
?? ?</el-select>
</el-checkbox-group>

vue element-ui select 多選默認(rèn)值

編輯需要設(shè)置默認(rèn)值

<div class="add_item active">
            <div class="add_name"> 參與者：</div>
            <div class="add_input">
              <el-select v-model="edituser_ids" multiple  filterable placeholder="請(qǐng)選擇">
                <el-option v-for="item in addOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

接口返回的格式是1,2這樣的字符串需要轉(zhuǎn)換為數(shù)組格式但是轉(zhuǎn)換為數(shù)組里的值還是字符串格式 select默認(rèn)以為是顯示的內(nèi)容

解決方法

this.editmain_user_ids = res.data.data.main_user_ids.split(',').map(Number);

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)低版本瀏覽器升級(jí)提示的代碼示例
在現(xiàn)代Web開發(fā)中,瀏覽器兼容性是一個(gè)重要的問(wèn)題,盡管大多數(shù)用戶已經(jīng)轉(zhuǎn)向了現(xiàn)代瀏覽器,但仍有一部分用戶可能仍在使用老舊的瀏覽器版本,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)低版本瀏覽器升級(jí)提示,并通過(guò)多個(gè)代碼示例來(lái)展示不同的應(yīng)用場(chǎng)景和技術(shù)點(diǎn),需要的朋友可以參考下
2024-10-10
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題,需要的朋友可以參考下
2018-01-01
一篇文章帶你吃透Vue生命周期(結(jié)合案例通俗易懂)
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一篇文章帶你吃透Vue生命周期，文章通過(guò)結(jié)合案例更加的通俗易懂,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
一篇文章教會(huì)你部署vue項(xiàng)目到docker
在前端開發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue3關(guān)鍵字高亮指令的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)關(guān)鍵字高亮指令的相關(guān)資料,w文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2023-11-11
Vue使用vue-draggable 插件在不同列表之間拖拽功能
這篇文章主要介紹了使用vue-draggable 插件在不同列表之間拖拽,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-03-03
vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解
本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式,這種是最簡(jiǎn)單,最直接,最容易理解的方式,實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式,通過(guò)data屬性來(lái)區(qū)分不同主題css變量樣式,感興趣的朋友可以參考下
2024-06-06
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來(lái)做，但在使用的過(guò)程中發(fā)現(xiàn)了一個(gè)有趣的事情，因?yàn)榘l(fā)現(xiàn)的這個(gè)事情展開了一些對(duì)于getter和setter的思考，具體是什么下面通過(guò)這篇文章來(lái)一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。
2016-12-12
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時(shí)間開發(fā)中上傳文件是經(jīng)常遇到的一個(gè)需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08