需求:业务需要实现带全选功能的多选按钮 element ui 中只提供了checkbox-box 而没有提供 checkbox-button 样式上没有满足。
实现原理: element 中checkbox-button 的多选功能实际上是数组形式存放选项 根据他的change事件来操作数组进行实现。
<div>
<el-checkbox-group v-model="store" @change="handleCheck">
<el-checkbox-button v-for="(item) in this.store_list" :label="item.name" :key="item.name"></el-checkbox-button>
</el-checkbox-group>
</div>
data() {
return{
// 已选中仓库
store:['全选'],
// 仓库列表
store_list:[{
store:'全选',
name:'全选'
},{
store:'京北',
name:'京北'
},{
store:'京南',
name:'京南'
},{
store:'京西',
name:'京西'
},{
store:'京东',
name:'京东'
}],
}
},
handleCheck(val){
// 检查数组中是否有全选
let fl = this.store.includes('全选')
if(fl){
if(this.store.length ===1 ){
// 如果当前全选 且只有全选 则不操作
this.store = ['全选']
}else if(this.store_list.length !== this.store.length) {
let ind = this.store.indexOf('全选')
if(ind ===this.store.length-1){
// 如果有全选且 全选在数组的最后,则说明当前点击的是全选按钮
this.store = ['全选']
}else {
// 有全选 且有多个值则删除全选
let i = this.store.indexOf('全选')
this.store.splice(i,1)
}
}else {
// 点击之后数组满了则只剩全选
this.store = ['全选']
}
}else if(this.store_list.length-1 === this.store.length) {
// 如果没有全选并且数组数量为总数减一 则全选
this.store = ['全选']
}
console.log(this.store)
},
具体逻辑就不说了