elementui的select實現(xiàn)多選添加功能
更新時間:2023年03月22日 11:53:16 作者:你鄰座的怪同學
這篇文章主要介紹了elementui的select實現(xiàn)多選添加功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
select組件
<el-col :span="12">
<el-form-item label="成員" prop="person">
<el-select v-model="temp.person" multiple filterable placeholder="請選擇" @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 中的定義默認值
selectAll: false // 用于標識是否全選--默認不全選
累加數(shù)據(jù)和賦值
getPartyList(data) {
fetchList(data).then(response => {
this.options = response.data.data
})
},
changeSelect(value) {
// selectAll 為true 的時候,就走全選分支,全選后出現(xiàn)的情況就是取消權限
if (this.selectAll) {
this.selectAll = false
if (value.indexOf('selectAll') > -1) {
this.options = value.filter(p => p !== 'selectAll')
} else {
this.selectValue = []
}
} else {
// 是否點擊了‘全選'選項
if (value.indexOf('selectAll') > -1) {
if (this.temp.person.length > 1) {
// 有‘全選'選項,則將‘全部'和其他值放置一塊
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 {
// 有‘全選'選項,則將‘全部'和其他值放置一塊
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 {
// 若是勾選選擇的長度和提供的選項長度是一樣的,則是 ‘全選'
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
// // 真實的勾選值
// const realSelect = this.temp.person.filter(item => item != 'selectAll')
// const qc = [...new Set(realSelect)]
}
到此這篇關于elementui的select實現(xiàn)多選添加的文章就介紹到這了,更多相關elementui的select多選添加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
AngularJS 是一個 MV* 框架,最適于開發(fā)客戶端的單頁面應用。它不是個功能庫,而是用來開發(fā)動態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關內(nèi)容,需要的朋友參考下吧2016-04-04
jQuery javascript獲得網(wǎng)頁的高度與寬度的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query javascript獲得網(wǎng)頁的高度與寬度的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04
微信小程序實現(xiàn)上拉加載功能示例【加載更多數(shù)據(jù)/觸底加載/點擊加載更多數(shù)據(jù)】
這篇文章主要介紹了微信小程序實現(xiàn)上拉加載功能,結合實例形式分析了微信小程序加載更多數(shù)據(jù)、觸底加載或點擊加載更多數(shù)據(jù)的相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2020-05-05
javascript中刪除指定數(shù)組中指定的元素的代碼
已知一個數(shù)組,我們想用指定的方法對數(shù)組中的元素進行逐一操作。需要的朋友可以參考下。2011-02-02

