<template>
<div>
<div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model="data" @change="handledataChange">
<el-checkbox v-for="(value,key) in datas" :key="key" :label="value.key">{{ value.name }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
export default {
data() {
return {
datas: [{ key: 1, name: '小明' }, { key: 2, name: '小王' }, { key: 3, name: '小张' }, { key: 4, name: '小刘' }, { key: 5, name: '小李' }, { key: 6, name: '小邓' }], // json对象数据
checkAll: false, // 全选状态
data: [],// model监听数据
isIndeterminate: true //indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果
}
},
methods: {
//全选
handleCheckAllChange(val) {
// 绑定json对象时
this.checkAll = !!this.checkAll //判断全选
const checked = this.datas.map(function(item) { return item.key }) //通过使用map绑定要去得的值(键)我这里取key
this.data = this.checkAll ? checked : [] // 是否被选中
this.isIndeterminate = false
console.log(this.data)