多选

html

<div id="app">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="isAll" />全选</th>
            <th>序号</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>
              <input type="checkbox" v-model="checkedIds" :value="item.id" />
            </td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.num }}</td>
            <td>{{ item.total }}</td>
          </tr>
        </tbody>
      </table>

      <p>勾选的商品总价: {{ total }}</p>
    </div>

<script src="./js/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js";></script>

配置

<script>
      let vm = new Vue({
        el: "#app",

        data: {
          list: [],

          checkedIds: [], // 被勾选的商品的id集合
        },

        computed: {
          // isAll () {
          //   return this.list.length === this.checkedIds.length;
          // },

          isAll: {
            get () {
              return this.list.length === this.checkedIds.length;
            },

            set (bol) {
              if (bol) {
                this.checkedIds = this.list.map(item => item.id)
              } else {
                this.checkedIds = []
              }
            }
          },

          total () {
            // 1. 过滤出 list 中被勾选了的商品
            let arr = this.list.filter(item => {
              return this.checkedIds.indexOf(item.id) > -1
            })

            // 2. 将 arr 中每个商品的总价加起来
            let total = arr.reduce((total, item) => {
              return total += item.total
            }, 0)

            return total;
          }
        }
      });

      $(function() {
        $.get('/list.json', (result) => {
          // vm.list = result;
          result.forEach(item => {
            let total = item.price * item.num
            item.total = total
          })

          vm.list = result
        })
      })
    </script>
Last modification:November 29th, 2019 at 03:45 pm
如果觉得我的文章对你有用,请随意赞赏