element-ui 使用el-select实现下拉全选全不选功
在开发中遇到el-select下拉全选功能，默认：全部，全选的时候里面的内容都要选上，点击的时候可进行不选，输入框显示对应的数据
效果图
代码如下：
/**
* 数据
*/
supplierListValue: [
{
"supplierId": "12",
"supplierName": "拼多多",
},
{
"supplierId": "34",
"supplierName": "京东"
},
{
"supplierId": "56",
"supplierName": "淘宝",
}
],
/**
* 多选择供应商
*/
handleSelect(arr) {
if (!this.isSelectedAll(this.supplierListValueTemp)) {
// 上次没有全选
if (this.isSelectedAll(arr) || this.supplierListValue.length === this.supplierList.length - 1) {
this.setSelectAll()
}
} else {
// 上次已经全选
if (!this.isSelectedAll(arr)) {
// 取消全选
this.supplierListValue = []
}
// 取消某一项
this.supplierListValue.splice(0, 1)
this.showTags = false
this.supplierListValueTemp = this.supplierListValue
}
this.listQuery.supplierId = arr
this.getList()
},
/**
* 设置供应商全选样式
*/
setSelectAll() {
this.supplierListValue = []
this.supplierList.forEach(item => {
this.supplierListValue.push(item.supplierId)
})
this.showTags = true
// hack隐藏选中的数量
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
})
},
