vue elementui 结合 el-checkbox-group 组件实现全选效果

结合 el-checkbox-group 组件实现全选效果,效果图在文章末尾

直接上代码

html 复制代码
<template>
  <div>
    <div style="display: flex;height: 27px;border-radius: 5px;">
      <div v-for="(item, idx) in legendClickList" :key="idx" style="width: 55px;height: 27px;padding-top: 4px;">
        <div style="transform: scale(0.8);text-align: center;color:rgb(68,67,67);font-weight: 700;">{{item.value}}</div>
      </div>
    </div>
    <el-checkbox-group style="" v-model="checkboxGroup" size="mini" @change="changeCheckboxGroup">
      <el-checkbox-button v-for="(item, idx) in legendClickList" :label="item.name" :key="idx">
        <div>{{item.name}}</div>
      </el-checkbox-button>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      checkboxGroup:['全部'],
      isTotal: '全部',
      legendClickList: [
        {
          name: '全部',
          value: '',
        },
        {
          name: '上海',
          value: '50%',
        },
        {
          name: '北京',
          value: '20%',
        },
        {
          name: '广州',
          value: '10%',
        },
        {
          name: '深圳',
          value: '20%',
        },
        {
          name: '厦门',
          value: '20%',
        },

      ],
      categories: [],
    }
  },
  created () {},
  mounted () {},
  computed: {},
  watch: {},
  methods: {
    changeCheckboxGroup () {
      let isTotal = this.isTotal;
      let len = this.checkboxGroup.length
      let totalLen = this.legendClickList.length;
      if (len < 1 || len === totalLen) {
        // 都不选 或者都选择了 那么就设置为 全部
        this.checkboxGroup = [isTotal]
      } else {
        // 最后一个也就是新增的是 全部 ,那么设置为 全部
        if (this.checkboxGroup[len - 1] == isTotal ) {
          this.checkboxGroup = [isTotal]
        } else {
          // 那么除去新增的之外,已有的里面包含 全部 时候,需要去掉
          if (this.checkboxGroup.includes(isTotal)) {
            let temp = this.checkboxGroup.filter((item) => {
              return item != isTotal
            })
            this.checkboxGroup = temp;
          } else {
            // 当除了 全部 其他类型全部选择的时候 可以设置为全部
            // if(len == totalLen -1){
            //   this.checkboxGroup = [isTotal];
            // }
          }
        } 
      }

      if(this.checkboxGroup.includes(isTotal)) {
        this.categories = ['上海','北京','广州','深圳','厦门']
      } else {
        this.categories = this.checkboxGroup
      }

      console.log(this.checkboxGroup,'this.checkboxGroup-----');
      console.log(this.categories,'this.categories-----');
    },
  },
}
</script>

<style lang="scss" scoped>
  
</style>

效果图:

相关推荐
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络8 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
喜欢敲代码的程序员9 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
失落的多巴胺9 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5