怎么实现点击加号，表格中的实际数量加1

img


怎么实现点击加号，表格中的实际数量加1，点击减号，表格中的实际数量减一，用到的技术栈是vue+elementui

这个不难啊，我把代码贴出来给你参考下：
html：

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Quantity">
      <template slot-scope="scope">
        {{ scope.row.quantity }}
        <el-button @click="add(scope.row)">+</el-button>
        <el-button @click="minus(scope.row)">-</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

JavaScript：

<script>
export default {
  data() {
    return {
      data: [
        { name: "item1", quantity: 0 },
        { name: "item2", quantity: 0 },
        { name: "item3", quantity: 0 }
      ]
    };
  },
  methods: {
    add(row) {
      row.quantity++;
    },
    minus(row) {
      if (row.quantity > 0) {
        row.quantity--;
      }
    }
  }
};
</script>

如果对你有帮助，请采纳。


<body>
    <div id="app">
        <button @click="number++">+</button>
        {{number}}
        <button @click="number--">-</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            number:0
        },
        methods: {},
    })
</script>