Element使用多选框组及全选按钮

最终效果如图：

1、无任何勾选状态

2、部分勾选状态

3.全部勾选状态

下面上代码。

页面布局部分

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedLists" @change="handleCheckedListChange">
      <el-checkbox v-for="item in listData" :label="item.sign" :key="item.sign" class="drag-item" border>
        <span>{{item.name}}</span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

TIPS：

Element中的checkbox组件。

1. indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果。
2. V-model属性可用来确定是否为全选状态。

数据部分

data() {
    return {
      listData: [
        { name: "1号", sign: 111 },
        { name: "2号", sign: 222 },
        { name: "3号", sign: 333 },
        { name: "4号", sign: 444 },
      ],
      checkedLists: [],
      checkAll: false,
      isIndeterminate: false,
    };
  },

函数部分

handleCheckAllChange(val) {
      this.checkedLists = val
        ? this.listData.map((item) => {
            return item.sign;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedListChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.listData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.listData.length;
    },

大概总结

主要还是对Element组件提供的属性、事件的一些使用技巧，没有太多的技术含量（技术含量都封装起来了），里面挺多东西不看源码的话就只能自己一个一个去试。试出来了还好，试不出来就GG。