Vue+Element+computed 实现购物车

<template>
  <div class="cart">
    <div class="group_btn">
      <el-button type="success" @click="addDialog">添加</el-button>
    </div>

    
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="类目" width="180" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" align="center"></el-table-column>
      <el-table-column label="数量" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="editDialog(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="total_warpper">
      <h3>共计：{{totalPrice}}</h3>
      <h3>总数：{{totalNumber}}</h3>
    </div>


    <!-- 添加弹窗的内容 -->
    <el-dialog title="添加信息" :visible.sync="addIsDialog" class="addDialog">
      <el-form :model="formData">
        <el-form-item label="类目" :label-width="formLabelWidth">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="formData.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="formData.number" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addIsDialog = false">取 消</el-button>
        <el-button type="primary" @click="addSureBtn">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 添加编辑的内容 -->
    <el-dialog title="添加信息" :visible.sync="editIsDialog" class="addDialog">
      <el-form :model="editData">
        <el-form-item label="类目" :label-width="formLabelWidth">
          <el-input v-model="editData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="editData.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="editData.number" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editIsDialog = false">取 消</el-button>
        <el-button type="primary" @click="editSureBtn">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script src="./car.js"></script>

<style scoped>
.cart {
  margin: 50px auto;
  width: 1000px;
}
.group_btn {
  margin-bottom: 30px;
}
.addDialog .el-input {
  width: 90%;
}
.total_warpper {
  text-align: right;
  margin-top: 30px;
}
h3 {
  margin-top: 10px;
}
</style>

car.js

export default {
  name:'car',
  data() {
    return {
      editIsDialog: false, //编辑弹窗
      addIsDialog: false, //添加弹窗
      multipleSelection: [], //存放已选择的数据
      multipleSelection2:[],
      formData: {
        name: "",
        price: "",
        number: ""
      },
      editData: {},
      formLabelWidth: "200",
      //表格中的数据
      tableData: [
        {
          name: "苹果",
          price: 10,
          number: 1
        },
        {
          name: "香蕉",
          price: 20,
          number: 1
        },
        {
          name: "草莓",
          price: 5,
          number: 1
        }
      ]
    };
  },
  methods: {
    // 点击发生的变化
    handleSelectionChange(val) {
      console.log("添加价格点击事件",val)
      this.multipleSelection = val; //给定义的数组赋值
    },
    handleDelete(index,row) {
      this.tableData.splice(index, 1); //删除表格的数据
    },
    // 点击弹出添加弹窗
    addDialog() {
      this.addIsDialog = true;
    },
    // 点击添加弹窗的确定按钮
    addSureBtn() {
      this.addIsDialog = false;
      this.tableData.push(this.formData);
      // 初始化添加表单
      this.formData = {
        name: "",
        age: "",
        sex: ""
      };
    },
    // 点击弹出添加弹窗
    editDialog(index, row) {
      this.editIsDialog = true;
      this.editData = row;
    },
    editSureBtn(row, index) {
      this.editIsDialog = false;
    }
  },
  // 通过computed计算属性及时改变
  computed: {
    // 总价
    totalPrice() {
      var price_total = 0;
      console.log("检查数据变化",this.multipleSelection)
      
     this.multipleSelection.forEach(item=>{
        console.log('循环事件111',item);
        return price_total+=item.price*item.number;
      })
      return price_total;
    },
    // 总数
    totalNumber() {  
      var number_total = 0;
      this.multipleSelection.map(item=>{
        return number_total+=item.number;
      })

      return number_total;

    }
  },
  components: {}
};

  效果如下：