Vue+Element+computed实现购物车

本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！

 

              

 

该购物车效果采用的是Element-ui库实现的。

采用了computed计算属性来实现逻辑操作。

 

功能分析：

1. 全选/全不选/单选；
2. 数量增加、数量减少；
3. 总金额 = 数量 * 单价；
4. 商品总价：每一项的总金额相加；
5. 新增、编辑功能；
6. 删除功能。

 

废话不多说，复制粘贴看效果： 

 

<template>
  <div class="cart">
    <el-row class="addBox">
      <el-button type="primary" @click="addChange">新增</el-button>
    </el-row>
    <div class="content">
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="名称" width="180" align="center" />
        <el-table-column prop="price" label="单价" width="180" align="center" />
        <el-table-column prop="num" label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              :min="1"
              :max="10"
              label="描述文字"
            />
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总计" align="center">
          <template slot-scope="scope">
            {{ (scope.row.num * scope.row.price).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button
              @click="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footerBox">
        <ul>
          <li>已选{{ multipleSelection.length }}件商品</li>
          <li>
            总价：<span class="totalPrice">￥{{ totalPrice }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="formData"
        label-width="100px"
        :rules="rules"
        ref="formData"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="formData.name"
            autocomplete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价：" prop="price">
          <el-input
            v-model="formData.price"
            autocomplete="off"
            placeholder="请输入单价"
          ></el-input>
        </el-form-item>
        <el-form-item label="数量：" prop="num">
          <el-input
            v-model="formData.num"
            autocomplete="off"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm('formData')" size="medium"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: "",
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入单价", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
      dialogVisible: false,
      formData: {
        price: "",
        name: "",
        num: 0,
      },
      tableData: [
        {
          price: "3.00",
          name: "西瓜",
          num: "1",
        },
        {
          price: "4.00",
          name: "苹果",
          num: "1",
        },
        {
          price: "5.00",
          name: "香蕉",
          num: "1",
        },
        {
          price: "6.00",
          name: "石榴",
          num: "1",
        },
      ],
      multipleSelection: [],
    };
  },
  computed: {
    totalPrice() {
      var price_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        price_total +=
          this.multipleSelection[i].num * this.multipleSelection[i].price;
      }
      return price_total.toFixed(2);
    },
  },
  methods: {
    //编辑按钮
    editRow(val) {
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
      this.formData = val;
    },
    //新增按钮
    addChange() {
      this.dialogTitle = "新增";
      this.dialogVisible = true;
    },
    //弹窗确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          if (this.dialogTitle == "新增") {
            this.tableData.push(this.formData);
          }
        } else {
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow(index, rows) {
      this.$alert("你确定要删除吗？", "提示", {
        confirmButtonText: "确定",
      })
        .then(() => {
          rows.splice(index, 1);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.cart {
  width: 80%;
  margin: 0 auto;
}
.addBox {
  padding: 10px;
  text-align: left;
}
.content {
  margin: 10px;
  border: 1px solid #dedede;
}
.footerBox {
  background: #f5f5f5;
  padding: 14px 14px;
  color: #646464;
}
.footerBox ul {
  display: flex;
  align-items: center;
  list-style: none;
  justify-content: space-between;
}
.totalPrice {
  color: red;
  font-size: 20px;
}
</style>

 

若有不明白请加群号：复制 659182980 ，也可扫码，希望能帮助到大家。