element-ui CheckBox全选.txt

<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)