VUE Element UI checkbox 全选操作

川长思鸟来 2022-09-17 05:29 195阅读 0赞

[VUE Element UI checkbox 全选操作 - smile\_lg - 博客园][VUE Element UI checkbox _ - smile_lg -]

![复制代码][8ae6719cc8adc65e8c07d1cb4e272266.gif]

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i">{
      {city.name}}</el-checkbox>
    </el-checkbox-group>
     
    
    data(){
      return {
        //全选
        checkAll: false,
        cities: [
          {
            "name":"高一",
            "value":"928"
          },
          {
            "name":"高二",
            "value":"929"
          },
          {
            "name":"高三",
            "value":"930"
          }
        ], //数据源
        checkedCities:[], //绑定默认选中
        isIndeterminate:false, //设置 indeterminate 状态，只负责样式控制
      }
    methods:{
    
    // 全选 --- 当绑定值变化时触发的事件
    handleCheckAllChange(val) {
    console.log(val) //val的值是一个布尔值，点中全选为false，取消全选为true
      this.cities.forEach(item=>{  //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
        this.checkedCities.push(item.name)
      })  
      this.checkedCities = val ? this.checkedCities : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
      this.isIndeterminate = false;  //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
    },
    // checkbox选中 --- 当绑定值变化时触发的事件
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;   //选中值的长度
      this.checkAll = checkedCount === this.cities.length;  //如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; //同全选按钮事件里面的那个样式控制
    }
    }，

![复制代码][152c30f50daaba29f82b4eccd3fd6628.gif]

api里面写的太麻烦了，写个易懂的如下：

![复制代码][acd0af49cbd97f8b8c50e36cd3655f5e.gif]

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i" v-model="checkedCities" @change="handleCheckedCitiesChange">{
      {city.name}}</el-checkbox>
    handleCheckAllChange(val) {//val就是v-model绑定的值，即this.checkAll
        if(this.checkAll){
            this.cities.forEach(item=>{
                this.checkedCities.push(item.name)
            })
        }else {
            this.checkedCities = []
        }
    
    },
    handleCheckedCitiesChange(value) {//value就是v-model绑定的值，即this.checkedCities
        console.log(this.checkedCities);
        if(this.checkedCities.length == this.cities.length){
            this.checkAll=true
        }else{
            this.checkAll=false
        }
    }

![复制代码][463c9bc0775715a53c17da8f51cc8145.gif]

原文链接：https://blog.csdn.net/qq\_40319394/article/details/100972340

[VUE Element UI checkbox _ - smile_lg -]: https://www.cnblogs.com/lgjava/p/12818549.html
[8ae6719cc8adc65e8c07d1cb4e272266.gif]: /images/20220828/59a055fdeca0425eb77e18518379fe99.png
[152c30f50daaba29f82b4eccd3fd6628.gif]: /images/20220828/0e19a73bfcf44ab38b7ba0386c4ea2ac.png
[acd0af49cbd97f8b8c50e36cd3655f5e.gif]: /images/20220828/ee9228ff6e1a4938b915b7c856f9e778.png
[463c9bc0775715a53c17da8f51cc8145.gif]: /images/20220828/a874498812214d07aacf1e94db5e40ac.png