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

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

这里先把文档截个图：

图比较长，文档上并没有全选的实例，我们可以分析这个页面，这个页面默认三行上海被选中了，是因为在中绑定的数组是checkboxGroup1，他初始化为“上海”，所以在他下面的

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

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

先看html：

    

      全选
      发货
    



      

        

          

            ✔
            

              
{
    {order.goodTitle}}
              
客户：{
    {order.address}}
              
订单编号：{
    {order.wxId}}
              
收件人：{
    {order.realName}}
              
联系电话：{
    {order.telPhone}}
            
            
          
          

            
￥{
    {order.payPrice}}
            
×{
    {order.count}}
          
          

          

            

              
客户备注：{
    {order.cusRemarks== '0' ?'无备注': order.cusRemarks}}
              
付款时间：{
    {order.payTime}}
            

            发货
          
        
      
    

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;
    }
  }

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