elementui的select實(shí)現(xiàn)多選添加功能
select組件
<el-col :span="12"> <el-form-item label="成員" prop="person"> <el-select v-model="temp.person" multiple filterable placeholder="請(qǐng)選擇" @change="changeSelect"> <el-option label="全部" value="selectAll"/> <el-option v-for="item in options" :key="item.id" :label="item.realname" :value="item.id"/> </el-select> </el-form-item> </el-col>
監(jiān)聽數(shù)據(jù)變化
watch: { partyOrganizations: { immediate: true, handler(val) { this.getPartyList({ organizationId: val }) } } },
return 中的定義默認(rèn)值
selectAll: false // 用于標(biāo)識(shí)是否全選--默認(rèn)不全選
累加數(shù)據(jù)和賦值
getPartyList(data) { fetchList(data).then(response => { this.options = response.data.data }) }, changeSelect(value) { // selectAll 為true 的時(shí)候,就走全選分支,全選后出現(xiàn)的情況就是取消權(quán)限 if (this.selectAll) { this.selectAll = false if (value.indexOf('selectAll') > -1) { this.options = value.filter(p => p !== 'selectAll') } else { this.selectValue = [] } } else { // 是否點(diǎn)擊了‘全選'選項(xiàng) if (value.indexOf('selectAll') > -1) { if (this.temp.person.length > 1) { // 有‘全選'選項(xiàng),則將‘全部'和其他值放置一塊 const optionsValue = [] this.options.forEach(item => { optionsValue.push(item) }) optionsValue.forEach(i => { this.temp.person.push(i.id) }) this.temp.person = [...new Set(this.temp.person)] this.selectAll = false } else { // 有‘全選'選項(xiàng),則將‘全部'和其他值放置一塊 const optionsValue = [] this.options.forEach(item => { optionsValue.push(item) }) const optionsNew = [] optionsValue.forEach(i => { optionsNew.push(i.id) }) this.temp.person = [...optionsNew] this.selectAll = false } } else { // 若是勾選選擇的長(zhǎng)度和提供的選項(xiàng)長(zhǎng)度是一樣的,則是 ‘全選' if (value.length === this.options.length) { const optionsValue = [] this.options.forEach(item => { optionsValue.push(item) }) const optionsNew = [] optionsValue.forEach(i => { optionsNew.push(i.id) }) this.temp.person = [...optionsNew] this.selectAll = false } else { // 都是單選 this.temp.person = value } } } this.selectAll = false // // 真實(shí)的勾選值 // const realSelect = this.temp.person.filter(item => item != 'selectAll') // const qc = [...new Set(realSelect)] }
到此這篇關(guān)于elementui的select實(shí)現(xiàn)多選添加的文章就介紹到這了,更多相關(guān)elementui的select多選添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
- 關(guān)于elementUI select控件綁定多個(gè)值(對(duì)象)
- vue之elementUi的el-select同時(shí)獲取value和label的三種方式
- ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式
- elementui?el-select?change事件傳參問題
- elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
- ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問題解決方案
相關(guān)文章
AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個(gè) MV* 框架,最適于開發(fā)客戶端的單頁面應(yīng)用。它不是個(gè)功能庫(kù),而是用來開發(fā)動(dòng)態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關(guān)內(nèi)容,需要的朋友參考下吧2016-04-04jQuery javascript獲得網(wǎng)頁的高度與寬度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query javascript獲得網(wǎng)頁的高度與寬度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04微信小程序?qū)崿F(xiàn)上拉加載功能示例【加載更多數(shù)據(jù)/觸底加載/點(diǎn)擊加載更多數(shù)據(jù)】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)上拉加載功能,結(jié)合實(shí)例形式分析了微信小程序加載更多數(shù)據(jù)、觸底加載或點(diǎn)擊加載更多數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05javascript中刪除指定數(shù)組中指定的元素的代碼
已知一個(gè)數(shù)組,我們想用指定的方法對(duì)數(shù)組中的元素進(jìn)行逐一操作。需要的朋友可以參考下。2011-02-02Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
這篇文章主要介紹了Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法,需要的朋友可以參考下2014-05-05