vue.js:el-checkbox的全选复选框例子(element-plus@2.2.5)
一，官方文档地址:
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