Vue中全选和反选操作

最新推荐文章于 2024-09-18 01:22:20 发布

陌~上花开

最新推荐文章于 2024-09-18 01:22:20 发布

阅读量1.6k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45803990/article/details/108417565

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

使用HTML

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 700px;
            text-align: center;
        }
        tr,
        th {
            height: 40px;
        }
    </style>
   <!-- <script src="../vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="box">
        <table cellspacing='0' border="solid 1px">
            <thead>
                <tr>
                    <th>全选<input type="checkbox" v-model='isAllChecked'></th>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='item in goods'>
                    <td><input type="checkbox" v-model='item.isCheck'></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>

                    <!-- 计算每个商品的价格根据选中的状态 -->
                    <td>{{goodsPrice(item)}}元</td>
                </tr>
                <tr>
                    <td colspan="6">商品总价:{{total}}元</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el: '.box',
            methods: {
                // 商品小计
                goodsPrice(item) {
                    var sum = 0;
                    // 选中就计算价格
                    if (item.isCheck) {
                        sum = item.price * item.num;
                    }
                    return sum;
                }
            },
            data: {
                goods: [
                    {
                        id: 20200925,
                        name: '苹果',
                        price: 3,
                        num: 12,
                        isCheck: false,
                    },
                    {
                        id: 20200945,
                        name: '香蕉',
                        price: 2,
                        num: 33,
                        isCheck: false,
                    },
                    {
                        id: 20200935,
                        name: '橘子',
                        price: 4,
                        num: 44,
                        isCheck: false,
                    },
                ]
            },
            computed: {
                isAllChecked: {
                    /* 
                     this.goods.every(el=>el.isCheck)返回结果为true 或者false

                    遍历下方每一个isCheck的状态、
                        1、 都选中返回true---------即全选为true,
                        2、 有一个没选中返回false---即全选为false
                    */
                    get() {
                        return this.goods.every(el => el.isCheck)
                    },
                    set(val) {
                        // 全选的状态true、false两种状态
                        console.log(val);

                        // val为true即全选的时候、下方每一个isCheck也是true
                        // val为false即全选的时候、下方每一个isCheck也是false
                        return this.goods.forEach(el => el.isCheck = val);
                    }
                },
                // 根据选中状态计算商品的价格
                total() {
                    var sum = 0;
                    this.goods.forEach(el => {
                        if (el.isCheck) {
                            sum += el.price * el.num;
                        }
                    })
                    return sum;
                },
            }
        })
    </script>
</body>
</html>

脚手架中使用element-ui实现全选和反选，实时知道哪些选中了。

<template>
  <div class="main-wrap">
    <el-checkbox v-model="isAllChecked">全选</el-checkbox>

    <div v-for="item in goods" :key="item.id">
      <el-checkbox v-model="item.isCheck" class="checkbox" @change="onChange">{{item.name}}</el-checkbox>
    </div>
    选中的列表内容：{{ CheckedList }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 20200925,
          name: "苹果",
          isCheck: false,
        },
        {
          id: 20200945,
          name: "香蕉",
          isCheck: false,
        },
        {
          id: 20200935,
          name: "橘子",
          isCheck: false,
        },
      ],
      CheckedList: [], //选中的列表内容
    };
  },
  computed: {
    isAllChecked: {
      get() {
        return this.goods.every((el) => el.isCheck == true);
      },
      set(val) {
        this.CheckedList = val ? this.goods : []; //全部选中，是整个goods列表。否则就是空数组
        // console.log("选中的列表", this.CheckedList);
        return this.goods.forEach((el) => (el.isCheck = val));
      },
    },
  },
  methods: {
    //   每一个子项发生改变的时候
    onChange(e) {
      //   选中的列表，
      this.CheckedList = this.goods.filter((el) => el.isCheck);
    //   console.log("子选项选中的列表", this.CheckedList);
    },
  },
};
</script>
<style scoped>
.main-wrap {
  margin: 100px;
}
.checkbox {
  margin: 20px;
}
</style>

使用ant-design实现全选反选
和element-ui使用方法一样，只是将template更换成ant-design的标签就行了。

<template>
  <div class="main-wrap">
    <a-checkbox v-model="isAllChecked">全选</a-checkbox>

    <div v-for="item in goods" :key="item.id">
      <a-checkbox v-model="item.isCheck" class="checkbox" @change="onChange">{{item.name}}</a-checkbox>
    </div>
    选中的列表内容：{{ CheckedList }}
  </div>
</template>