在開發(fā)中遇到el-select下拉全選功能罪裹，默認(rèn)：全部乱灵，全選的時(shí)候里面的內(nèi)容都要選上，點(diǎn)擊的時(shí)候可進(jìn)行不選贷腕，輸入框顯示對(duì)應(yīng)的數(shù)據(jù)
效果圖
代碼如下：
/**
*?數(shù)據(jù)
*/
supplierListValue: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "supplierId": "12",
? ? ? ? ? ? ? ? "supplierName": "拼多多",? ?
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "supplierId": "34",
? ? ? ? ? ? ? ? "supplierName": "京東"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "supplierId": "56",
? ? ? ? ? ? ? ? "supplierName": "淘寶",? ?
? ? ? ? ? ? }
? ? ? ? ],
/**
* 多選擇供應(yīng)商
*/
handleSelect(arr) {
if (!this.isSelectedAll(this.supplierListValueTemp)) {
// 上次沒有全選
if (this.isSelectedAll(arr) || this.supplierListValue.length === this.supplierList.length - 1) {
this.setSelectAll()
}
} else {
// 上次已經(jīng)全選
if (!this.isSelectedAll(arr)) {
// 取消全選
this.supplierListValue = []
}
// 取消某一項(xiàng)
this.supplierListValue.splice(0, 1)
this.showTags = false
this.supplierListValueTemp = this.supplierListValue
}
this.listQuery.supplierId = arr
this.getList()
},
/**
* 設(shè)置供應(yīng)商全選樣式
*/
setSelectAll() {
this.supplierListValue = []
this.supplierList.forEach(item => {
this.supplierListValue.push(item.supplierId)
})
this.showTags = true
// hack隱藏選中的數(shù)量
this.$nextTick(() => {
const $select = this.$refs.select.$el.getElementsByClassName('el-tag')[1]
$select.style.display = 'none'
})
this.supplierListValueTemp = this.supplierListValue
},
/**
* 判斷是否選擇了全部
*/
isSelectedAll(arr) {
return arr.some(item => {
return item === 0
})
},
