526互联

vue.js:el-checkbox的全选复选框例子(element-plus@2.2.5)

发布时间 2023-07-27 14:39:22作者: 刘宏缔的架构森林

一，官方文档地址:

https://element-plus.gitee.io/zh-CN/component/checkbox.html#%E4%B8%AD%E9%97%B4%E7%8A%B6%E6%80%81

二，代码：

1,html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="dpiSel" style="display: none;">
        <div style="margin-left:100px;width:700px;height:50px;">
          <div style="float:left;">
            <el-checkbox v-model="checkAll"
                         :indeterminate="isIndeterminate"
                         @change="handleCheckAllChange" id="chkall" >全选</el-checkbox></div>
          <div style="float:left;">选择要生成ico图标的大小:</div>
        </div>
 
        <el-checkbox-group v-model="checkedSize" @change="handleCheckedSizesChange"
                           style="margin-left:50px;width:700px;background: #ffff00;margin-top: 10px;">
          <el-checkbox v-for="sizeone in sizeList" :label="sizeone.value" :key="sizeone.value" :id="sizeone.id" >
            {{sizeone.label}}
          </el-checkbox>
        </el-checkbox-group>
 
</div>

2,js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script>
import {ref} from "vue";
 
export default {
  name: "ImgIco",
  setup() {
    //选中的size，保存在数组中
    const checkedSize = ref([]);
 
   //size的列表
    const sizeList = [
      {
        id:'chk16',
        value: '16',
        label: '16x16',
      },
      {
        id:'chk32',
        value: '32',
        label: '32x32',
      },
      {
        id:'chk48',
        value: '48',
        label: '48x48',
      },
      {
        id:'chk64',
        value: '64',
        label: '64x64',
      },
      {
        id:'chk96',
        value: '96',
        label: '96x96',
      },
      {
        id:'chk128',
        value: '128',
        label: '128x128',
      },
      {
        id:'chk256',
        value: '256',
        label: '256x256',
      }
    ]
 
    //是否全选
    const checkAll = ref(false);
    //是否部分选中
    const isIndeterminate = ref(false);
    //全选被点击时
    const handleCheckAllChange = (val) => {
      if (val == true) {
          for (let i=0;i<sizeList.length;i++) {
              let one = sizeList[i];
              checkedSize.value.push(one.value);
          }
      } else {
        checkedSize.value =  [];
      }
      console.log(checkedSize.value);
      isIndeterminate.value = false
    }
 
    //处理单个checkbox的事件
    const handleCheckedSizesChange = (value) => {
      const checkedCount = value.length;
      checkAll.value = checkedCount === sizeList.length;
      isIndeterminate.value = checkedCount > 0 && checkedCount < sizeList.length;
    }
 
    return {
      sizeList,
      checkedSize,
      checkAll,
      isIndeterminate,
      handleCheckAllChange,
      handleCheckedSizesChange,
    }
  }
}
</script>

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/07/24/vue-js-elcheckbox-de-quan-xuan-fu-xuan-kuang-li-zi-elementplus-2-2-5/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

三，测试效果

取消全选

全选:

部分选中:

四，查看element-plus的版本:

liuhongdi@lhdpc:/data/vue/touch$ npm list element-plus
touch@0.1.0 /data/vue/touch
└── element-plus@2.2.5