this.checkAll=false this.isIndeterminate=true 为半选状态
都为true 为勾选状态
都为false为未勾选状态
<el-col :span="24" class="img-col">
<el-row type="flex" justify="space-between">
<el-col :span="1.5">{{ img.newName }}</el-col>
<el-col :span="1.5">
<el-checkbox
v-model="img.checked"
@change="handleChange(img, index)"
></el-checkbox>
</el-col>
</el-row>
</el-col>
<el-col :span="4">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>当页全选</el-checkbox
>
</el-col>
data(){
return {
isIndeterminate: false,
checkAll: false,
}
}
//全选
handleCheckAllChange(val) {
if (this.checkAll) {
this.isIndeterminate=false
this.tableList.forEach((item) => (item.checked = true));
this.count = this.tableList.length;
this.multiple = !this.count;
this.checkedOptions = this.tableList.map((item) => {
if (item.checked) {
return item.id;
}
});
} else {
this.tableList.forEach((item) => (item.checked = false));
this.isIndeterminate = false;
this.count = 0;
this.multiple = !this.count;
this.checkedOptions = [];
}
// this.checkAll=false
// this.isIndeterminate=false
},
handleChange(img, index) {
// console.log(img.checked);
let checkedOptions = this.tableList.filter((item, i) => {
return item.checked === true;
});
this.checkedOptions = checkedOptions.map((item) => item.id);
this.count = this.checkedOptions.length;
if (img.checked) {
this.isIndeterminate = true;
this.multiple = !this.checkedOptions.length;
if (this.count === this.tableList.length) {
this.isIndeterminate = false;
this.checkAll = true;
}
} else {
// console.log(this.count);
this.isIndeterminate = true;
this.checkAll = false;
this.multiple = !this.checkedOptions.length;
if (this.count === 0) {
this.isIndeterminate = false;
this.checkAll = false;
}
}
// this.checkAll=false
// this.isIndeterminate=true
},
网友评论