vue+element-UI复选框多选框全选-反选

H@Z*rTE|i

已于 2023-02-14 14:59:39 修改

阅读量761

点赞数

分类专栏： vue2 文章标签： vue.js ui javascript

于 2023-02-14 14:56:50 首次发布

本文链接：https://blog.csdn.net/IT13333/article/details/129026916

版权

vue2 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

在这里插入图片描述

整个页面代码、

<template>
  <div class="about">
     <div class="orderlist">
          <div class="info">
            <div >
              <b>已开票订单（共{{ orderList.length }}笔）{{checkOrders}}</b>
            </div>
          </div>
          <div class="orders">
            <el-checkbox-group
              @change="checkOrdersChange"
              v-model="checkOrders">
              <div
                class="order-item"
                v-for="(order, index) in orderList" :key="index">
                <el-checkbox
                  :label="order.orderId">
                  <span></span>
                
                </el-checkbox>
                  <div @click="clickOrder(order)" class="order-info">
                    <!-- 这里的样式最后写就行了 -->
                    <div class="timeandshopname">
                      <span>{{order.createTime}}</span>
                      <span class="shopName">{{order.shopName}}</span>
                    </div>
                    <div class="price">
                      <span class="rmb">¥</span>
                      <span class="money">{{order.amount}}</span>
                    </div>
                    <div class="goodsnum">合计商品{{order.num}}种</div> 
                    <div
                      @click.stop="() => {}"
                      class="orderNo">
                      <span> 订单编号：</span>
                      <span>{{order.orderNo}}</span>
                    </div> 
                </div>
              </div>
            </el-checkbox-group>
          </div>
          <div
            v-if="orderList.length"
            class="btns">
            <el-checkbox
              @change="checkAllChange"
              v-model="checkAll">全选</el-checkbox>
            <!-- <el-button type="primary">确定</el-button> -->
          </div>
        </div>
  </div>
</template>
<script>
// import { getLodop } from "../utils/LodopFuncs";
export default {
  data(){
    return{
      orderList:[
        {
          orderId:'1',
          orderNo:'87546765897878',
          createTime:'2023/02/21',
          shopName:'供应商自营1',
          amount:'7650',
          num:'250'
        },
        {
          orderId:'2',
          orderNo:'8754654478',
           createTime:'2023/02/21',
          shopName:'供应商自营2',
          amount:'750',
          num:'2650'
        },
        {
          orderId:'3',
          orderNo:'875465476878',
           createTime:'2023/02/21',
          shopName:'供应商自营3',
          amount:'7800',
          num:'440'
        },
        {
          orderId:'4',
          orderNo:'875465987897878',
           createTime:'2023/02/21',
          shopName:'民生自营4',
          amount:'72300',
          num:'30'
        }
      ],
      checkAll:false,
      checkOrders:[],
      
    }
  },
  methods:{
    checkAllChange(){
      this.checkOrders = this.checkAll ? this.orderList.map(order => {
        return order.orderId;
      }) : [];
      // this.getOrderInfoList();
    },
    checkOrdersChange(){
      this.checkAll = this.orderList.length ? this.orderList.every(order => {
        return this.checkOrders.indexOf(order.orderId) > -1;
      }) : false;
      // this.getOrderInfoList();
    },
    clickOrder(order){
      console.log('clickOrder', order)
      if (this.checkOrders.indexOf(order.orderId) > -1) {
        this.checkOrders = this.checkOrders.filter(id => {
          return id != order.orderId;
        })
      } else {
        this.checkOrders.push(order.orderId);
      }
      console.log('checkOrders', this.checkOrders)
      this.checkOrdersChange();
    },
  }
}
</script>
<style lang='less' scoped>
  .orderlist{
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 16px;
    overflow: hidden;
    .info{
      display: flex;
      &>div{
        flex: 1;
      }
    }
    .orders{
      flex: 1;
      overflow-y: auto;
      margin: 16px 0;
      .order-item{
        padding: 10px 0;
        display: flex;
        justify-items: center;
        align-items: center;
        .order-info{
          font-size: 14px;
          flex: 0.3;
          cursor: pointer;
          border: 1px solid #eee;
          border-radius: 10px;
          padding: 12px 20px;
          .shopName{
            margin-left: 20px;
          }
          .price{
            color: #e1012e;
            margin: 12px 0;
            .money{
              font-size: 24px;
            }
          }
          .orderNo{
            margin-top: 12px;
          }
        }
      }
    }
    .btns{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>