element-ui +vue 下实现带全选功能的多选按钮

最新推荐文章于 2025-11-18 03:33:00 发布

原创最新推荐文章于 2025-11-18 03:33:00 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #javascript

本文介绍如何在ElementUI中实现带有全选功能的多选按钮。通过使用el-checkbox-button组件并结合v-model和change事件，可以实现动态更新选择状态，并在用户交互时保持全选与部分选择的一致性。

需求：业务需要实现带全选功能的多选按钮 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)
    },