<template><div class="box"><el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="onAllSelectChange"> 全选</el-checkbox><div class="item" v-for="(item,index) in list" :key="index"><el-checkbox v-model="item.checked" @change="selectChangeItem" style="margin-top:15px" /><div class="main"><div class="title">{{item.title}}</div><div class="content">{{item.content}}</div></div></div></div>
</template><script>
export default {data () {return {isIndeterminate: null,checkAll: false,list: [{title: "学不会学不会学不会学不会",content: '学不会学不会学不会学不会学不会学不会学不会学不会学不会',checked: false},{title: "学不会学不会学不会学不会",content: '学不会学不会学不会学不会学不会学不会学不会学不会学不会',checked: false},{title: "学不会学不会学不会学不会",content: '学不会学不会学不会学不会学不会学不会学不会学不会学不会',checked: false},{title: "学不会学不会学不会学不会",content: '学不会学不会学不会学不会学不会学不会学不会学不会学不会',checked: false}],checkList: [] // 勾选的数据}},methods: {// 全选onAllSelectChange () {this.list.forEach(item => {// 全选了if (this.checkAll) {item.checked = truethis.isIndeterminate = falsethis.checkList = this.list// 取消全选} else {item.checked = falsethis.isIndeterminate = nullthis.checkList = []}})},// 单选selectChangeItem () {const check = this.list.every(item => item.checked)// 单选有一个未勾选if (!check) {this.isIndeterminate = true} else {// 单选都勾选了this.isIndeterminate = nullthis.checkAll = true}// 单选都未勾选const flag = this.list.map(item => item.checked).some(item => item)if (!flag) {this.checkAll = falsethis.isIndeterminate = null}// 勾选的数据this.checkList = this.list.filter(item => item.checked)}}
}
</script><style lang="less" scoped>
.box {margin: 30px;
}
.item {padding: 20px;border: 1px solid greenyellow;background: #fff;display: flex;.main {margin-left: 20px;}
}
</style>