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>

效果图:

相关推荐
鹏多多15 小时前
React无限滚动插件react-infinite-scroll-component的配置+优化+避坑指南
前端·javascript·react.js
华仔啊15 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
云和数据.ChenGuang15 小时前
Component template requires a root element, rather than just错误
前端·javascript·vue.js
艾小码16 小时前
告别JS初学者噩梦:这样写流程控制和函数才叫优雅
前端·javascript
sdgsdgdsgc18 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98418 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j18 小时前
spark
javascript·数据库·spark
黑云压城After21 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务1 天前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
牧杉-惊蛰1 天前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js