el-checkbox-group的全选与反选

最新推荐文章于 2024-12-02 10:45:44 发布

冰眸js

最新推荐文章于 2024-12-02 10:45:44 发布

阅读量964

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bingmoujs/article/details/134260261

版权

文章描述了如何在Vue应用中使用ElementUI组件实现一个点击“全部”按钮控制多选框的全选状态，并统计选中按钮的数量。通过v-model双向数据绑定和change事件处理函数，实现在切换按钮状态时同步更新数据。

摘要由CSDN通过智能技术生成

需求如下：

思路：在点击全部时按钮组双向绑定赋值全部值，点击按钮组内按钮计算选中按钮数量与按钮组数量对比，判定是否选中全部

代码如下：

<template>
  <div>
    <el-checkbox-button v-model="checkall" @change="handleCheckAllChange">全部</el-checkbox-button>
    <el-checkbox-group v-model="state" @change="checkRadio"  >
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
 
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data () {
      return {
        cities: cityOptions,
        checkall:false,
        state:[]

      };
    },
    methods:{
        handleCheckAllChange(val){
            this.state=val?this.cities:[]
            this.getList()
        },
        checkRadio(val){
            this.state=val
            const checkedCount=val.length
            this.checkAll=checkedCount===this.cities.length
            this.getList()
        },
        getList(){

        }
     }
  }
</script>