购物车详情

src/views/shopCart/detail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-table ref="multipleTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
+    <el-table ref="cartProjectTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"> </el-table-column>
       <el-table-column label="商品信息">
@@ -46,14 +46,9 @@
     <div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
       <span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
     </div>
-    <el-table
-      v-if="failureCartProjectList.length > 0"
-      :show-header="false"
-      ref="multipleTable"
-      :data="failureCartProjectList"
+    <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable" :data="failureCartProjectList"
       tooltip-effect="dark"
-      style="width: 100%"
-      @selection-change="handleSelectionChange">
+      style="width: 100%">
       <el-table-column width="55">
         <template slot-scope="scope">
           <el-checkbox disabled></el-checkbox>
@@ -79,7 +74,7 @@
       <div class="clearfix">
         <el-row>
           <el-col :span="6">
-            <el-checkbox v-model="isAllCheck">全选</el-checkbox>
+            <el-checkbox v-model="isAllCheck" @change="changeIsAllCheck">全选</el-checkbox>
             <el-button type="text" style="margin-left: 10px">删除选中商品</el-button>
           </el-col>
           <el-col :span="14">
@@ -113,7 +108,7 @@ export default {
       cartProjectList: [],
       // 失效商品
       failureCartProjectList: [],
-      multipleSelection: [],
+      cartProjectSelected: [],
       // 购物车统计
       statisticsCart: {
         // 商品总数
@@ -133,21 +128,37 @@ export default {
     getDetailInfo().then(response => {
       console.log(response)
       this.statisticsCart = response.data.statisticsCart;
-      this.cartProjectList = response.data.cartSkuList
+      this.cartProjectList = response.data.cartSkuList;
+      setTimeout(this.initCartSelected, 200);
     })
   },
   methods: {
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach(row => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
+    initCartSelected(){
+      this.cartProjectList.forEach(cartProject => {
+        if ("Y" === cartProject.isSelected){
+          this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
+        }
+      })
+    },
+    changeIsAllCheck(){
+      if (this.isAllCheck){
+        this.$refs.cartProjectTable.toggleAllSelection();
+      }else {
+        this.$refs.cartProjectTable.clearSelection();
       }
     },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
+    // 当表格当中的记录发生选中改变的时候会调用此方法
+    // 并且传递过来selectedRow为当前表格选中的记录
+    handleSelectionChange(selectedRow) {
+      // selectedRow 为当前表格选中的记录
+      // cartProjectSelected 上次表格选中的记录
+      console.log(selectedRow)
+      console.log(this.cartProjectSelected)
+      // 所以 selectedRow 中 未包含 cartProjectSelected 则 为新选中的记录
+      // 若 cartProjectSelected 中 未包含 selectedRow 则 为取消选中的记录
+
+      this.isAllCheck = selectedRow.length === this.cartProjectList.length
+      this.cartProjectSelected = selectedRow;
     }
   }
 }