vue使用element多选框添加全选按钮，兼有单独选择提交功能

element文档：https://element.eleme.cn/#/zh-CN/component/checkbox

这里先把文档截个图：

图比较长，文档上并没有全选的实例，我们可以分析这个页面，这个页面默认三行上海被选中了，是因为在<el-checkbox-group v-model="checkboxGroup1">中绑定的数组是checkboxGroup1，他初始化为“上海”，所以在他下面的<el-checkbox-button中，上海会被选中，那么我们要想做个全选按钮，就是改变checkboxGroup1数组的值就可以了。

这里先给个我做好的实例：

当点每个订单的右上角多选框可以挨个选择，后点发货，全部发货，也可以点上面的全选按钮，后再发货或者取消部分订单。

先看html：

    <div align="left" class="check_all_div">
      <el-checkbox-button left="20px" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox-button>
      <el-button type="success" @click="handleAllSend" plain :disabled="sendDisabled">发货</el-button>
    </div>


<el-checkbox-group v-model="checkOrderList" @change="handleCheckedOrdersChange" size="mini">
      <div v-for="(order,index) in orders" :key="index" class="col">
        <article class="card-item shadow_lg">
          <div class="card-item__img-wrapper">
            <el-checkbox-button
              :label="order.wxId"
              :key="order.wxId"
              :disabled="order.disputeOr=='-1'"
              class="float_div"
            >✔</el-checkbox-button>
            <div class="card-item__text-div">
              <h3 class="card-item__title h-reset h-position-t">{{order.goodTitle}}</h3>
              <p align="left" class="card-item__title h-reset h-position-t">客户：{{order.address}}</p>
              <p align="left" class="card-item__title h-reset h-position-t">订单编号：{{order.wxId}}</p>
              <p align="left" class="card-item__title h-reset h-position-t">收件人：{{order.realName}}</p>
              <p align="left" class="card-item__title h-reset h-position-t">联系电话：{{order.telPhone}}</p>
            </div>
            <img class="card-item__img" :src="`https://www.网址.com//${order.goodImg}`" />
          </div>
          <div class="card-item__content">
            <p class="card-item__text-item">￥{{order.payPrice}}</p>
            <p class="card-item__text-item">×{{order.count}}</p>
          </div>
          <div class="card-item__divider"></div>
          <div class="card-item__footer">
            <div class="card-item__text-div">
              <p
                align="left"
                class="card-item__text-item"
              >客户备注：{{order.cusRemarks== '0' ?'无备注': order.cusRemarks}}</p>
              <p class="card-item__text-item">付款时间：{{order.payTime}}</p>
            </div>

            <el-button
              type="primery"
              :disabled="order.disputeOr=='-1'"
              @click="handleClick(order.wxId)"
              class="card-item__add-button"
            >发货</el-button>
          </div>
        </article>
      </div>
    </el-checkbox-group>

js:

  methods: {
    // 选中的全选的发货事件
    handleAllSend: function() {
      let that = this;
      //显示遮罩，阻止客户做页面任何操作
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      that.$axios
        .post("https://www.接口/y", {
          orderList: that.checkOrderList
        })
        .then(body => {
          //去掉遮罩
          loading.close();
          //发货成功后的逻辑，把发货的从当前页面去掉

          alert("批量发货成功，请及时送货！！！");
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 多选选项事件
    handleCheckedOrdersChange: function(value) {
      let that = this;
      let checkedCount = value.length;
      that.checkOrderList = value;
      // 设置全部发货按钮是否可用。至少有一个有效选中的全部发货旁边的发货按钮才是可用的
      if (checkedCount) {
        that.sendDisabled = false;
      } else {
        that.sendDisabled = true;
      }
    },
    // 全选按钮
    handleCheckAllChange(val) {
      let that = this;

      if (val) {
        // 全选对应的值是wxId

        // 第一步筛选掉异常订单
        that.checkOrderList = that.orders.filter(res => {
          // if(res.disputeOr!='-1')
          return res.disputeOr != "-1";
        });

        // 第二步只保留wxId
        that.checkOrderList = that.checkOrderList.map(res => {
          // if(res.disputeOr!='-1')
          return res.wxId;
        });

        if(that.checkOrderList.length>0)
        // 发送按钮可用
        that.sendDisabled = false;
      } else {
        // 取消全选
        that.checkOrderList = [];
        that.sendDisabled = true;
      }
    },
    // 发货按钮，单个货物
    diliverClick: function() {
      let that = this;
      this.$axios
        .post("https://www.接口/y", {
          orderId: this.tempOrderId,
          delivery: this.form
        })
        .then(body => {
          // 发货完成的把页面中的发货的删除
          that.orders.some((item, i) => {
            if (item.wxId == that.tempOrderId) {
              that.orders.splice(i, 1);
              return true;
            }
          });
          alert("发货成功，请及时送货！！！");
        })
        .catch(error => {
          console.log(error);
        });

      this.diliverDialogVisible = false;
    }
  }

这样解决了可以全部发货，还可以单独发货，也可以部分多选发货，还兼有个别异常订单无法操作发货的功能。