The first: effect preview
Thought analysis
This not trouble, actually, we selected the first table belongs to multi-select, element that is to say, is to provide a selected line array function, so that we can get the user is to choose what, this is the first step, the second step is how do we ensure that each page after selecting the other pages selected option is still there, This blog is updated, before I here don’t say how to implement, is also a field, the third step is that we will be selected by the user data is added to the shopping cart inside of the table, and the fourth step is how to in the above operations such as delete, corresponding to the original user’s choice of page to eliminate, this is a place of trouble.
Code implementation
/ * * *@addThis is the add to the checkout button */
add_goods(){
let that = this;
if(that.tableData_check_out_transit.length === 0){
that.hintInfo('warning'.'You haven't selected any bills yet! ');
}else{
that.hintInfo('success'.'Added successfully! ');
//tableData_check_out_transit is the tableData_check_out_transit, which is the data selected by the user. The function triggered is @selection-change,
//tableData_check_out is the table in the shopping cart
that.tableData_check_out = that.tableData_check_out_transit;
//to_check_out can be used to directly count items when removing itemsthat.to_check_out = that.tableData_check_out.length; }},/ * * *@open_goods Opens the checkout bar to calculate the bill to be paid */
open_goods(){
let that = this;
that.calculate();
},
/ * * *@calculate Calculate the total amount */
calculate(){
let that = this;
let count = 0;
that.separate_id = [];
that.tableData_check_out.map((res) = >{
count = count + res.charge_amount;
that.separate_id.push(res.id); // Take the id of the current row selected by the user as an argument
console.info(res.charge_amount);
});
that.count_settle = count;
console.info(that.count_settle);
console.info(that.separate_id);
},
/ * * *@removeRow Remove table */ from shopping cart H5
removeRow(index, row, TableData){
let that = this;
TableData.splice(index, 1);
if(that.to_check_out > 0){
that.to_check_out -- ;
that.hintInfo('success'.'Removed successfully! ');
that.calculate();// recalculate the data
that.toggleSelection(row); // Remove the elements that need to be removed
}else{
that.hintInfo('warning'.'No data! '); }},Copy the code<! -- Checkout bar H5-->
<el-dialog
title="Checkout line"
:visible.sync="dialog_settle"
width="40%">
<el-table
:data="tableData_check_out"
height="400px"
size="mini"
:cell-style="{textAlign:'center'}"
:header-cell-style="{background:'#303A41',color:'#fff',fontSize:'x-small',textAlign:'center'}"
style="width: 100%">
<el-table-column
prop="account_id"
type="index"
label="Serial number">
</el-table-column>
<el-table-column
prop="account_id.id"
label="The main account id">
</el-table-column>
<el-table-column
prop="code_income_type_id.name"
label="Entry code">
</el-table-column>
<el-table-column
prop="biz_date"
label="Business Date">
</el-table-column>
<el-table-column
prop="charge_amount"
label="Consumption amount">
</el-table-column>
<el-table-column
prop="pay_status"
label="Payment Status">
<template slot-scope="scope">
<span v-if="scope.row.pay_status === 0">Did not pay</span>
<span v-else-if="scope.row.pay_status === 1">Have to pay</span>
<span v-else-if="scope.row.pay_status === 2">abnormal</span>
<span v-else>No data</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="Operation">
<template slot-scope="scope">
<el-button
@click.native.prevent="removeRow(scope.$index, scope.row,tableData_check_out)"
type="text"
size="small">remove</el-button>
</template>
</el-table-column>
</el-table>
Copy the codePS: H5 is also posted here, in order to better understand the function.
Second: effect preview
Thought analysis
This shopping cart and is not the same as above, will be relatively difficult point, difficult point in how to click on the same item when add a new directly, rather than new plus one column, and then we need to do is, when the user clicks a column, we get the data of id, and compares the above form, determine whether already exists, if there is, So let’s just add one instead of adding a new column. Instead, add a column
The code analysis
//merchandise_name function is triggered when clicking on switch option
merchandise_name(value){
let that =this;
console.log(value);
that.$axios({
url:that.api.api_9530_9503+"/v1/stock/product_product/get/"+value,
method: "get",
}).then(res= >{
if(res.data.message==="success") {console.log(res);
res.data.data.account_number=1;
res.data.data.money=res.data.data.list_price;// Calculate the price
let ayy = {};
for(let i of that.account_arr){
ayy[i.id] = i.name;
}
if(value in ayy){
//nothing...
}
else{
that.account_arr.push(res.data.data);
that.merchandise_list_data = that.account_arr;
}
console.log("step");
}
})
.catch(error= > {
console.error(error)
});
// Add one if it exists
for(let i =0; i< that.account_arr.length; i++){if(value === that.account_arr[i].id){
console.log("Repeat");
console.log(that.account_arr[i].account_number);
that.account_arr[i].account_number+=1;
}else {
//nothing....
}
}
that.merchandise_list_data= that.account_arr;
},
Copy the codePS: I did not write this logical processing, it is ok for reference, but it is not difficult to understand, I hope to record it. Like you can pay attention to, I am not good at writing, so write to understand on the line, do not understand can directly say the problem, I see will reply.