购物车的全选反选功能

这是带返回selected的字段的情况

  <div class="table-title">
     <div class="checkbox">
         <el-checkbox v-model="checked" @change="checkAllChange"></el-checkbox>
     </div>
     <div class="read">已读</div>
     <div class="delete">删除</div>
  </div>

  <div class="table-body">
     <div class="table-body-item" :class="{'isActive': changeIndex==index}" v-for="(item, index) in newsList" :key="index" @click="changeIndex=index">
         <div class="checkbox">
             <el-checkbox v-model="item.selected" ></el-checkbox>
         </div>
         <div class="status" :title=item.status>{{item.status}}</div>
         <div class="detail" @click="toDetail(item.id)"><span>{{item.detail}}</span></div>
         <div class="date">{{item.date}}</div>
     </div>
  </div>

  data() {
    return {
      changeIndex: -1,
      checkAll: false,
      newsList: [
        {
          id: 0,
          selected: false,
          background: 0,
          status: '企业升级审批结果哈车费好几次是分局纪念册返奖率鹅夫人开吗哈哈哈哈哈',
          detail: '您的企业升级审批已通过！请点击查看详情',
          date: '2020年11月9日'
        },
        {
          id: 1,
          selected: false,
          background: 0,
          status: '订单审批结果',
          detail: '您的订单xxxxx审批已通过！请点击查看详情',
          date: '2020年11月9日'
        },
        {
          id: 2,
          selected: false,
          background: 0,
          status: '订单发货通知',
          detail: '您的订单xxxxx已发货！请点击查看详情',
          date: '2020年11月9日'
        },
        {
          id: 3,
          selected: false,
          background: 0,
          status: '营销优惠活动',
          detail: '营销优惠活动xxxx火热来袭！请点击查看详情',
          date: '2020年11月9日'
        },
        {
          selected: false,
          background: 0,
          status: '企业升级审批结果哈次是分局纪念册返奖率鹅夫人开吗哈哈哈哈哈',
          detail: '您的企业升级审批已通过！请点击查看详情',
          date: '2020年11月9日'
        }
      ]
    };
  },

  methods: {
    checkChange() {
      this.checkAll = this.newsList.every((item) => {
        return item.selected;
      });
    },
    checkAllChange() {
      console.log(this.checkAll);
      if (this.checkAll === true) {
        this.newsList.forEach(item => {
          item.selected = this.checkAll;
        });
      }
      if (this.checkAll === false) {
        this.newsList.forEach(item => {
          item.selected = this.checkAll;
        });
      }
    },
    toDetail(id) {
      this.$router.push({
        path: '/member/detail'
      });
    }
  }

      .table-title{
          height: .54rem;
          background: #F5F5F5;
          display: flex;
          align-items: center;
          border-bottom: .01rem solid #f0f0f0;
          .read, .delete{
            width: 62px;
            height: .30rem;
            line-height: .30rem;
            background: #fff;
            border: 1px solid #eee;
            border-radius: .08rem;
            text-align: center;
            cursor: pointer;
            color: #666;
            margin-right: .21rem;
          }
      }
      .table-body{
          background-color: #fff;
          .table-body-item{
            display: flex;
            height: .55rem;
            align-items: center;
            color: #333;
            border-bottom: .01rem solid #f0f0f0;
            .status{
              width: 1.55rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .detail{
              margin-left: .51rem;
              width: 7.05rem;
              span{
                cursor: pointer;
              }
            }
            .date{
              color: #999;
            }
            &:last-child{
              border-bottom: none;
            }
            &:hover{
              background-color: #f5f5f5;
            }
          }
          .isActive{
            background-color: #f5f5f5;
          }
        }