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>