elementplus的el-checkbox 全选
时间: 2023-11-14 09:12:33 浏览: 75
elementplus的el-checkbox与element-ui的el-checkbox类似,都是多选框组件。在实现全选功能时,可以通过绑定一个全选的状态变量,然后在全选框的change事件中改变所有子选框的选中状态,同时在子选框的change事件中判断是否所有子选框都被选中,如果是则改变全选框的选中状态。具体实现可以参考以下代码:
```
<el-checkbox v-model="selectAll" @change="selectAllFunc">全选</el-checkbox>
<el-checkbox v-model="item.checked" @change="selectProduct">子选框</el-checkbox>
data() {
return {
selectAll: false, // 全选状态
collectionlist: [{checked: false}, {checked: false}, {checked: false}] // 子选框列表
}
},
methods: {
selectAllFunc(val) { // 全选框change事件
this.collectionlist.forEach(item => {
item.checked = val
})
},
selectProduct(val) { // 子选框change事件
let allChecked = true
for (let i = 0, len = this.collectionlist.length; i < len; i++) {
if (!this.collectionlist[i].checked) {
allChecked = false
break
}
}
this.selectAll = allChecked
}
}
```