vue表格里change方法怎么優(yōu)化才能實現(xiàn)選中跟取消選中的時候都進(jìn)行數(shù)據(jù)對比

初始化狀態(tài)

選中狀態(tài)

取消選中狀態(tài)

選中的表格的積分 跟 用戶的剩余積分 如果剩余積分多的話 顯示消耗的積分 如果剩余積分不夠的話 直接顯示積分不足 無法兌換

但是現(xiàn)在取消選中之后 狀態(tài)不變 請教代碼的邏輯哪里有問題 或者哪里寫錯了

 <div class="table-container">
      <div class="btn-container" v-if ="exchange">
         <span>共需要消耗積分：</span><b>{{count}}</b>  個
      </div>
       <div class="btn-container" v-if="noExchange">
         <span class="exchangeError">剩余積分不足，無法完成兌換</span>
      </div>
      <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
             <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
        <el-table-column align="center" prop="name" label="方案名稱" width='120'>
          <!-- <template slot-scope="scope">{{scope.row.beginCardNo}} - {{scope.row.endCardNo}}</template> -->
        </el-table-column>
        <el-table-column align="center" prop ="type" label="兌換類型">
          <!-- <template slot-scope="scope">{{scope.row.cardTypeName}}</template> -->
        </el-table-column>
        <el-table-column align="center"  label="兌換個數(shù)" width="160px" prop ="exchangeNum">
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input>
             <!-- </el-col> -->
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="" label="未配送數(shù)量"></el-table-column>-->
        <el-table-column align="center" label="消耗積分" prop="costPointsNum">
           <template slot-scope="scope">{{scope.row.exchangeNum*scope.row.costPointsNum}}</template>
          <!-- <template slot-scope="scope">{{scope.row.deposit | money}}</template> -->
        </el-table-column>
      </el-table>

 handleSelectionChange (val) {
      this.detailList = val.map(v => {
        const {costPointsNum,exchangeNum,schemeId} = v;
        return {
          costPointsNum,
          exchangeNum,
          schemeId
        };
      });
      this.multipleSelection = val.map((item) =>{
        return item.costPointsNum * item.exchangeNum;
      });
      let len = this.multipleSelection.length;
      console.log(len);
      if (len === 0) {
        this.count = 0;
        this.noExchange = false;
        this.exchange = true;
      } else {
        this.count = 0;
        this.multipleSelection.map(item => {
          this.count += item;
        });
        let len = 0;
      }
      let leftPoints = this.userInfo.pointsNum;
      console.log(leftPoints); 
      if (this.count < leftPoints){
        console.log("可以兌換");
        this.exchange = true;
        this.noExchange = false;
      } else {
        this.exchange = false;
        this.noExchange = true;
        console.log('積分余額不足');
      }
      return this.count;
      // console.log(this.multipleSelection); 
    },