Wuke
/
ruyi_cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车详情

123
DongZeLiang 2024-04-08 15:23:10 +08:00
parent 24ea545cec
commit 5f3c214af2
1 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/shopCart/detail/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="商品信息"> <el-table-column label="商品信息">
@ -46,14 +46,9 @@
<div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; "> <div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
<span style="margin: 20px 0px; float: left; color: #787be8">已失效</span> <span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
</div> </div>
<el-table <el-table v-if="failureCartProjectList.length > 0" :show-header="false" ref="multipleTable" :data="failureCartProjectList"
v-if="failureCartProjectList.length > 0"
:show-header="false"
ref="multipleTable"
:data="failureCartProjectList"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100%" style="width: 100%">
@selection-change="handleSelectionChange">
<el-table-column width="55"> <el-table-column width="55">
<template slot-scope="scope"> <template slot-scope="scope">
<el-checkbox disabled></el-checkbox> <el-checkbox disabled></el-checkbox>
@ -79,7 +74,7 @@
<div class="clearfix"> <div class="clearfix">
<el-row> <el-row>
<el-col :span="6"> <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-button type="text" style="margin-left: 10px">删除选中商品</el-button>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
@ -113,7 +108,7 @@ export default {
cartProjectList: [], cartProjectList: [],
// 失效商品 // 失效商品
failureCartProjectList: [], failureCartProjectList: [],
multipleSelection: [], cartProjectSelected: [],
// 购物车统计 // 购物车统计
statisticsCart: { statisticsCart: {
// 商品总数 // 商品总数
@ -133,21 +128,37 @@ export default {
getDetailInfo().then(response => { getDetailInfo().then(response => {
console.log(response) console.log(response)
this.statisticsCart = response.data.statisticsCart; this.statisticsCart = response.data.statisticsCart;
this.cartProjectList = response.data.cartSkuList this.cartProjectList = response.data.cartSkuList;
setTimeout(this.initCartSelected, 200);
}) })
}, },
methods: { methods: {
toggleSelection(rows) { initCartSelected(){
if (rows) { this.cartProjectList.forEach(cartProject => {
rows.forEach(row => { if ("Y" === cartProject.isSelected){
this.$refs.multipleTable.toggleRowSelection(row); this.$refs.cartProjectTable.toggleRowSelection(cartProject, true);
}); }
} else { })
this.$refs.multipleTable.clearSelection(); },
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;
} }
} }
} }