标签：vue num item price 反选 全选 books return select

<template>
  <div>
    <table>
      <tr>
        <th><input type="checkbox" v-model="selectAll" />全选/全不选</th>
        <th v-for="(item, index) in titles" :key="index">{{ item }}</th>
      </tr>
      <tr v-for="(item, index) in books" :key="item.name">
        <td><input type="checkbox" v-model="item.select" /></td>
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.date }}</td>
        <td>¥{{ item.price.toFixed(2) }}</td>
        <td>
          <button @click="redu(index)">-</button>
          {{ item.num }}
          <button @click="add(index)">+</button>
        </td>
        <td><button @click="del(index)">移除</button></td>
      </tr>
      <tr>
        <td colspan="7" style="text-align: left">总价格为:{{ total }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: ["编号", "书籍名称", "出版日期", "价格", "数量", "操作"],
      books: [
        {
          name: "算法导论",
          date: "2006-9",
          price: 85,
          num: 1,
          select: true,
        },
        {
          name: "UNIX编程艺术",
          date: "2006-2",
          price: 59,
          num: 1,
          select: true,
        },
        {
          name: "Vue程序设计",
          date: "2008-10",
          price: 35,
          num: 1,
          select: true,
        },
        {
          name: "颈椎康复",
          date: "2006-3",
          price: 129,
          num: 1,
          select: true,
        },
      ],
    };
  },
  computed: {
    total() {
      let ret = this.books.reduce((pre, cur) => {
        return cur.price * cur.num + pre;
      }, 0);
      return "¥" + ret.toFixed(2);
    },
    selectAll: {
      get() {
        for (let i = 0; i < this.books.length; i++) {
          if (!this.books[i].select) {
            return false;
          }
        }
        return true;
      },
      set(newVal) {
        this.books.forEach((item) => {
          item.select = newVal;
        });
      },
    },
  },
  methods: {
    add(i) {
      if (!this.books[i].select) {
        alert("你还没做出选择");
        return;
      }
      this.books[i].num++;
    },
    redu(i) {
      if (!this.books[i].select) {
        alert("你还没做出选择");
        return;
      }
      this.books[i].num > 1 ? this.books[i].num-- : "";
    },
    del(i) {
      if (!this.books[i].select) {
        alert("你还没做出选择");
        return;
      }
      this.books.splice(i, 1);
    },
  },
};
</script>
 
<style lang = "less" scoped>
table {
  border-collapse: collapse;
  margin: 100px auto;
}
table,
td,
th {
  border: 1px solid #000;
}
td,
th {
  padding: 10px;
}
</style>

标签：vue,num,item,price,反选,全选,books,return,select
来源： https://www.cnblogs.com/Gawainehzh/p/15965972.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。