elementUI中复选框checkbox的使用
<template>
<div style="padding:20px;">
<el-card>
<el-checkbox v-model="checked">备选项</el-checkbox>
<div>{{ checked }}</div>
</el-card>
<el-card style="margin-top:20px;">
<el-checkbox-group v-model="checkList" @change="getCheck">
<el-checkbox
v-for="item in checkboxOption"
:key="item.value"
:label="item.value"
></el-checkbox>
</el-checkbox-group>
</el-card>
// 可全选
<el-card style="margin-top:20px;">
<!-- indeterminate 属性 用以表示checkbox的不确定状态,一般用于实现全选的效果 只负责样式的控制 -->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="CheckAllChange"
>全选</el-checkbox
>
<el-checkbox-group v-model="checkCity" @change="getCheckAll">
<el-checkbox
v-for="item in cityOption"
:key="item"
:label="item"
></el-checkbox>
</el-checkbox-group>
</el-card>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
checked: true,
checkList: [],
checkboxOption: [
{ value: "打篮球" },
{ value: "打游戏" },
{ value: "玩电脑" },
{ value: "看书" },
],
checkAll: false,
isIndeterminate: true,
cityOption: ["a", "b", "c", "d"],
checkCity: ["a", "c"],
};
},
methods: {
getCheck() {
console.log("checkList", this.checkList);
},
CheckAllChange(value) {
// console.log("quanxuan", value);
this.checkCity = value ? this.cityOption : [];
// 点击全选的时候,控制的样式只有 不选和全选√ 所以isIndeterminate控制的样式不出现
this.isIndeterminate = false;
},
getCheckAll(value) {
// console.log("选择", value, this.checkCity.length);
let checkedCount = value.length;
this.checkAll = checkedCount === this.checkCity.length;
// 当选择的选项大于0小于所有的数据的时候 isIndeterminate控制的样式出现
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.cityOption.length;
},
},
};
</script>
<style lang="scss" scoped></style>
效果展示
参考elementUI