element复选框全选事件

最近用到，特做记录：

效果：

                 

复选框：

<template >
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedData" @change="handleCheckedChange">
        <el-checkbox v-for="(item, index) in list"
                     :key="item.id"
                     :label="item.id">
         {{ item.name }}
        </el-checkbox>
    </el-checkbox-group>
</template>

script：

    handleCheckAllChange(val) {
      const that = this
      console.log(val) //val的值是一个布尔值，点中全选为false，取消全选为true
      that.list.forEach(item=>{  //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组checkedDat中去
        that.checkedData.push(item.id)
      })
      that.checkedData = val ? this.checkedData : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
      that.isIndeterminate = false;  //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
    },
    handleCheckedChange(value) {
      const that = this
      let checkedCount = value.length;
      that.checkAll = checkedCount === this.list.length;
      that.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
    },
    //allTags为原始数据，如果不含checked属性，则需通过该方法处理
    getList() {
      //获取数据用settimeout模拟
      setTimeout(() => {
        this.allTags.map(item => {
          //item.checked = false
          this.$set(item, 'checked', false) // 这里，给对象添加属性，用$set方法。
          return item
        })
        this.list = this.allTags
      }, 1500)
    },

每一项占一行css：

  /deep/ .el-checkbox {
    width: 100%;
    margin-top: 10px;
    margin-left: 20px;
    background-color: #fff;
  }

附上本页面全部脚本代码：

<script type="text/javascript">
  const allTags  = [
    { id: 1, pid: 1, name: '地区' },
    { id: 2, pid: 2, name: '游戏类型' },
    { id: 3, pid: 4, name: '性别' },
    { id: 4, pid: 5, name: '设备类型' },
    { id: 5, pid: 6, name: '休闲时间' },
    { id: 6, pid: 7, name: '王者荣耀' },
    { id: 7, pid: 8, name: '音乐' },
    { id: 8, pid: 9, name: '品牌手表' },
    { id: 9, pid: 10, name: '相机' },
    { id: 10, pid: 12, name: '游戏人群' },
  ];

  export default {
    name: 'rightBtnList', 
    data() {
      return {
        checkAll: false,
        checkedData: [1, 2],
        isIndeterminate: true,
        list: [],
        allTags: allTags,

      };
    },      
    created() {
      if(this.optionType) {
        this.optionForm()
      }
      this.getList()
    },
    methods: {
      handleCheckAllChange(val) {
        const that = this
        console.log(val) //val的值是一个布尔值，点中全选为false，取消全选为true
        that.list.forEach(item=>{  //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
          that.checkedData.push(item.id)
        })
        console.log(that.checkedData)
        that.checkedData = val ? this.checkedData : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
        that.isIndeterminate = false;  //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
        console.log(that.checkedData)

      },
      handleCheckedChange(value) {
        const that = this
        let checkedCount = value.length;
        that.checkAll = checkedCount === this.list.length;
        that.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
      },
      getList() {
        //获取数据用settimeout模拟
        setTimeout(() => {
          this.allTags.map(item => {
            //item.checked = false
            this.$set(item, 'checked', false) // 这里，给对象添加属性，用$set方法。
            return item
          })
          this.list = this.allTags
        }, 1500)
      },
    }
  }
</script>

附上原文链接：

借鉴自：

1.Element UI checkbox 全选操作分析

2.Element-ui Checkbox 多选框 样式修改：