vue实现多选和取消多选的效果

最新推荐文章于 2024-05-28 14:54:17 发布

Whuiry

最新推荐文章于 2024-05-28 14:54:17 发布

阅读量915

点赞数 1

分类专栏： Vue框架前端

本文链接：https://blog.csdn.net/Whuiry/article/details/115711781

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue框架

7 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中如何实现列表的全选与单选功能。通过v-for循环遍历list，使用v-model绑定item.checked，结合change事件处理函数，实现了单个item的选择与全选状态的同步。当所有item都被选中时，全选框自动勾选，反之则取消。同时，提供了简化版的代码实现，利用every()方法判断是否所有元素都被选中，优化了代码逻辑。

摘要由CSDN通过智能技术生成

一、要实现的效果

1.当点击“全选”时，能全选所有；
在这里插入图片描述
2.点取消掉列表的某个input框时，“全选”框不被选择；

二、html结构

前提： v-for循环遍历list，列表中的每个item都有checked属性，用v-model绑定item.checked；input标签有change方法，当值改变时生效
（1）单选：

<div v-for="(i,index) in list">
            <input type="checkbox"
              v-model="i.checked"
              @change="checkboxSelect" />
</div>

（2）全选：

        <div class="checkbox text">
          <input type="checkbox"
            v-model="checkAll"
            @change="checkAllChange">全选
        </div>

三、method方法

（1）单选：

    checkboxSelect() {
      // 选中的个数
      var num = this.list.filter(item => item.checked).length;
      // console.log(num);
      if (num == this.list.length) {
      //如果选中的数量为数组的长度，则全选框被选择
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },

可简化为：

    checkboxSelect() {
      // every()检测数组中的元素是否符合条件，如果元素都满足条件，返回true；
      //只要有一个不满足，返回false
      this.checkAll = this.list.every(item => item.checked)
    }

（2）全选

    checkAllChange() {
      this.list.forEach(item => {
        // 把每个item的checked属性 设为 与全选框一致的值
        item.checked = this.checkAll
        // console.log('checkAllChange', item.checked)
      })
    }