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 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登9 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我9 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper9 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳10 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱10 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖10 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀10 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴10 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录11 小时前
JavaScript屏幕切换检测方案
前端·javascript