vue2实现“全选“操作

最新推荐文章于 2024-07-28 20:27:10 发布

偷的浮生半日闲.

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量93

点赞数 4

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_59361327/article/details/140551265

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!-- 
  ******手动实现“全选”操作*****vue2
        1.手工捏一个确实麻烦，要考虑比较全的逻辑，所以后面如果为了工作效率，这样的小控件还是去搜比较合适
        2.目前处在学习，刚开始工作阶段，其实有时间自己去实现，一方面巩固自己的学习成果，
        另一方面可以通过与ai生成的代码对比，优化自己的代码,
        比如这里用map明显比forEach适合，
        巩固了vue的computed和watch,
-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style>
    /* 隐藏原始的复选框 */
        input[type="checkbox"] {
          display: none;
        }
      
        /* 创建自定义多选框的外观 */
        .custom-checkbox {
          cursor: pointer;
          position: relative;
          padding-left: 30px;
          margin-bottom: 12px;
          display: block;
        }
      
        .custom-checkbox input[type="checkbox"] + .checkbox-label:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 20px;
          height: 20px;
          border: 2px solid #000;
          background-color: #fff;
          border-radius: 50%;
        }
      
        /* 当原始复选框被选中时，更改自定义复选框的外观 */
        .custom-checkbox input[type="checkbox"]:checked + .checkbox-label:before {
          background-color: #000;
        }
      
        /* 添加一个选中标记 */
        .custom-checkbox input[type="checkbox"]:checked + .checkbox-label:after {
          content: '✔';
          position: absolute;
          left: 5px;
          top: -1px;
          font-size: 16px;
          color: white;
        }
  </style>
</head>
  <body>
    <div id="app" style="position: absolute; top: 50px;">
      <!-- 全选复选框 -->
      <div class="custom-checkbox">
        <input type="checkbox" v-model="selectAll" id="checkbox-all">
        <label class="checkbox-label" for="checkbox-all">全选</label>
      </div>
      <!-- 使用Vue实现的多选框 -->
      <div v-for="(item, index) in items" :key="index" class="custom-checkbox">
        <input type="checkbox" v-model="checkedItems[index]" :id="'checkbox-'+index">
        <label class="checkbox-label" :for="'checkbox-'+index">{{ item }}</label>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 自己实现的方法, 取消全选就全部取消 -->
    <script>
            new Vue({
              el: '#app',
              data: {
                items: ['选项一', '选项二', '选项三'], // 假设这是你的选项列表
                checkedItems: [], // 存储选中状态的数组
                selectAll: false // 全选复选框的选中状态
              },
              watch: {
                selectAll: {
                  immediate:true,
                  handler(val) {
                    // 为true, 就只要全选中就为true
                    // console.log(val);
                    if (val) {
                      this.checkedItems.forEach( (item, index) => {
                        this.checkedItems[index] = val;
                      } )
                    } else {
                      // 为false, 分情况，如果全部为false才需要更新
                      if (this.checkedItems.every(item => item == true)) {
                        this.checkedItems.forEach( (item, index) => {
                          this.checkedItems[index] = val;
                        } )
                      } 
                    }
                  }
                },
                // 监听每一项Input绑定的状态
                checkedItems: {
                  deep: true,
                  handler(val) {
                    // console.log('----332----', val);
                    // 全为true则为true
                    if (val.every(item => item == true)) this.selectAll = true;
                    // 有一个为false则为false
                    if (val.some(item => item == false)) this.selectAll = false; 
                  }
                }
              },
              created() {
                // 初始化
                for(var i=0; i<this.items.length; i++) {
                  this.checkedItems.push(false);
                }
              }
            });
    </script>
    <!-- ai改造的方法，但是取消全选没全部取消 -->
    <!-- <script>
         new Vue({
           el: '#app',
           data: {
             items: ['选项一', '选项二', '选项三'], // 假设这是你的选项列表
             checkedItems: [], // 存储选中状态的数组
             selectAll: false, // 全选复选框的选中状态

           },
           created() {
             // 初始化checkedItems数组，默认为false
             this.checkedItems = this.items.map(() => false);
           },
           methods: {
             toggleSelectAll() {
               if (this.selectAll) {
                 // 当勾选全选时，将所有选项设置为选中
                 this.checkedItems = this.items.map(() => true);
               } else {
                 // 当取消全选时，不做任何操作，保留之前的选中状态
               }
             }
           },
           watch: {
             selectAll: {
               handler(val) {
                 this.toggleSelectAll();
               }
             },
             checkedItems: {
               deep: true,
               handler(val) {
                 // 如果所有选项都被选中，则勾选全选
                 // 如果至少有一个选项未被选中，则取消勾选全选
                 this.selectAll = val.every(item => item === true);
               }
             }
           }
         });
       </script> -->

</body>
</html>