vue使用Element UI案例（商品列表）

Goods.vue

<template>
  <div id="goods">
    <el-button type="text" @click="dialogVisible = true">添加商品</el-button>
    <el-dialog
      title="添加商品"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="demo-input-suffix">
        商品名稱：
        <el-input
          placeholder="請輸入內容"
          v-model="goods_name">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        商品數量：
        <el-input
          placeholder="請輸入內容"
          v-model="goods_num">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        商品價格：
        <el-input
          placeholder="請輸入內容"
          v-model="goods_price">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="save()">確 定</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="goods_list"
      border

      style="width: 100%">
      <el-table-column
        type="index"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名稱"
        width="180">
      </el-table-column>

      <el-table-column
        prop="price"
        label="商品數量"
        width="180">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.num" @change="issub(scope.$index)" size="mini" :min="0"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column
        prop="price"
        label="價格"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope)" type="text" size="small">編輯</el-button>
          <el-button type="text" size="small" @click="del(scope.$index)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-input v-model="total" style="width: 600px">
      <template slot="prepend">合價:</template>
      <template slot="append">元</template>
    </el-input>

  </div>
</template>
<script>
  export default {
    name: "Goods",
    filters: {
      format(money) {
        return "￥" + money.toFixed(2);
      }
    },
    data() {
      return {
        dialogVisible: false,
        active: "zero_num",
        goods_name: "",
        goods_num: "",
        goods_price: "",
        goods_index: -1, // 當前本次操作的商品信息[-1表示新增,大於等於0表示編輯]
        goods_list: [
          {"name": "python入門", "num": 27, "price": 150},
          {"name": "python進階", "num": 21, "price": 100},
          {"name": "python高級", "num": 17, "price": 75},
          {"name": "python研究", "num": 37, "price": 60},
          {"name": "python放棄", "num": 57, "price": 110},
        ]
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('確認關閉？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      issub(index) {
        if (this.goods_list[index].num === 0) {
          this.del(index)
        }
      },
      save() {
        // 保存數據[添加數據]
        if (this.goods_index == -1) {
          this.goods_list.push({
            "name": this.goods_name,
            "num": parseInt(this.goods_num),
            "price": parseFloat(this.goods_price),
          });
        } else {
          this.goods_list[this.goods_index].name = this.goods_name;
          this.goods_list[this.goods_index].num = parseInt(this.goods_num);
          this.goods_list[this.goods_index].price = parseFloat(this.goods_price);
        }
        this.cancel();
      },
      cancel() {
        this.dialogVisible = false;
        this.goods_index = -1;
        this.goods_name = "";
        this.goods_num = "";
        this.goods_price = "";
      },
      del(index) {
        // 刪除數據
        this.goods_list.splice(index, 1);
      },
      update(index) {
        // 顯示當前編輯的商品信息
        this.dialogVisible = true;
        console.log(index);
        this.goods_index = index.$index;
        this.goods_name = index.row.name;
        this.goods_num = index.row.num;
        this.goods_price = index.row.price;
        // 當用戶點擊保存時，修改對應數據
      },
    },
    computed: {
      total(){
        let ret = 0;
        this.goods_list.forEach(function (value, index) {
          // console.log(value,index);
          let sum_price = parseFloat(value.price) * parseFloat(value.num);
          ret = ret + sum_price
        });
        return ret
      }
    }
  }
</script>

<style scoped>
  #goods table {
    width: 600px;
    border: 1px solid #000;
    border-collapse: collapse;
  }

  #goods td, #goods th {
    border: 1px solid #000;
  }

  #goods .box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #eee;
    width: 280px;
    height: 160px;
    padding: 40px 80px;
  }
</style>