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

})

},