vue+element踩坑记-购物车的操作

第一种：效果预览

思路分析

这个其实不麻烦，首先我们被选中的table是属于多选的，也就是说element是提供了一个被选中的行的数组函数的，那么这样我们可以拿到用户是选择了哪些行的，这是第一步，第二步是我们怎么保证每一页选择了以后别的页被选中的选项还在，这个我之前的博客是更新了，这里不说怎么实现的了，也是一个字段就可以了，第三步就是我们将用户选择的数据新加到购物车的那个table里面，第四步就是怎么在上面操作例如删除的时候，对应的原来用户选择的页消除了，这个是麻烦的一个地方。

代码实现

	   /**
       * @add_goods 加入结账栏   这个就是加入结账栏的按钮
       */
      add_goods(){
        let that = this;
        if(that.tableData_check_out_transit.length === 0){
          that.hintInfo('warning','您还未选择任何账单！');
        }else{
          that.hintInfo('success','添加成功！');
          //tableData_check_out_transit  这个就是主页上的表格，这个数据是用户选择的数  据，触发的函数是@selection-change ，
          //tableData_check_out是购物车里面的table 
          that.tableData_check_out = that.tableData_check_out_transit;
          //to_check_out 进行移除操作的时候可以直接进行计数
          that.to_check_out = that.tableData_check_out.length;
        }
      },
      /**
       * @open_goods 打开结账栏  用于计算需要支付的账单
       */
       open_goods(){
        let that = this;
        that.calculate();
      },
      /**
       * @calculate 计算总金额
       */
       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); //将用户选择的当前行的id拿到，作为参数
          console.info(res.charge_amount);
        });
        that.count_settle = count;
        console.info(that.count_settle);
        console.info(that.separate_id);
      },
       /**
       * @removeRow 待结账栏移除操作   购物车h5 中table的移除的操作
       */
      removeRow(index, row, TableData){
        let that = this;
        TableData.splice(index, 1);
        if(that.to_check_out > 0){
           that.to_check_out -- ;
           that.hintInfo('success', '移除成功！');
           that.calculate();//将数据重新计算  这里是计算结账的价格
           that.toggleSelection(row); //移除需要的移除的元素  
        }else{
           that.hintInfo('warning', '没有数据！');
        }
      },

    <el-dialog
    title="待结账栏"
    :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="序号">
      el-table-column>
      <el-table-column
        prop="account_id.id"
        label="主账id">
      el-table-column>
      <el-table-column
        prop="code_income_type_id.name"
        label="入账代码">
      el-table-column>
      <el-table-column
        prop="biz_date"
        label="营业日期">
      el-table-column>
      <el-table-column
        prop="charge_amount"
        label="消费金额">
      el-table-column>
      <el-table-column
        prop="pay_status"
        label="支付状态">
        <template slot-scope="scope">
          <span v-if="scope.row.pay_status === 0">未支付span>
          <span v-else-if="scope.row.pay_status === 1">已支付span>
          <span v-else-if="scope.row.pay_status === 2">异常span>
          <span v-else>无数据span>
        template>
      el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="removeRow(scope.$index, scope.row,tableData_check_out)"
            type="text"
            size="small">
            移除
          el-button>
        template>
      el-table-column>
    el-table>

PS:这里将H5也贴出来了，目的是为了更好的理解函数作用。

第二种：效果预览

思路分析

这种购物车和上面的不一样，相对来说会难一点，难点在怎么在点击相同的物品的时候直接新加一个，而不是新加一列，那么我们需要做的就是，用户点击了某一列的时候，我们拿到这个数据的id，和上面的表格进行比对，判断是不是已经存在了，如果存在，那么直接进行数量加一，不新加一列。反之加一列

代码分析

//merchandise_name 函数是点击切换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;//计算价格
                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)
            });
          //处理的是如果存在的话直接进行数字加一
          for(let i =0;i< that.account_arr.length;i++){
             if(value === that.account_arr[i].id){
               console.log("重复");
               console.log(that.account_arr[i].account_number);
               that.account_arr[i].account_number+=1;
             }else {
               //nothing....
             }
          }
          that.merchandise_list_data= that.account_arr;
        },

PS:这个逻辑的处理我不是我写的，拿来做参考是可以的，但是不难理解的，希望可以记录一下。
喜欢的可以关注一下，鄙人的文采不好，所以写的能看懂就行，不明白的可以直接说问题，我看到会回复的。