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 {
// 若是勾選選擇的長度和提供的選項(xià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彈窗在特定場合錯(cuò)位問題解決方案
相關(guān)文章
AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個(gè) MV* 框架,最適于開發(fā)客戶端的單頁面應(yīng)用。它不是個(gè)功能庫,而是用來開發(fā)動(dòng)態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關(guān)內(nèi)容,需要的朋友參考下吧2016-04-04
jQuery 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-05
javascript中刪除指定數(shù)組中指定的元素的代碼
已知一個(gè)數(shù)組,我們想用指定的方法對(duì)數(shù)組中的元素進(jìn)行逐一操作。需要的朋友可以參考下。2011-02-02
Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
這篇文章主要介紹了Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法,需要的朋友可以參考下2014-05-05

