当前位置：首页 > VUE

使用vue实现全选

2026-01-17 12:49:59VUE

使用 Vue 实现全选功能

基础实现思路

通过 v-model 绑定全选复选框的状态，同时监听其变化来更新子选项的状态。

模板部分

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.selected"> {{ item.name }}
    </div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ]
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.items.every(item => item.selected)
      },
      set(value) {
        this.items.forEach(item => {
          item.selected = value
        })
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

进阶实现：独立组件封装

将全选逻辑封装为可复用的组件，支持动态数据源。

组件代码

<template>
  <div>
    <input type="checkbox" v-model="allSelected" @change="handleSelectAll">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: Array, required: true }
  },
  computed: {
    allSelected: {
      get() {
        return this.value.every(item => item.selected)
      },
      set(val) {
        this.$emit('input', this.value.map(item => ({
          ...item,
          selected: val
        })))
      }
    }
  },
  methods: {
    handleSelectAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

性能优化方案

对于大数据量场景，使用虚拟滚动+全选功能组合实现。

示例代码片段

// 在长列表场景中
{
  data() {
    return {
      visibleItems: [], // 当前可见项
      allItems: [] // 完整数据
    }
  },
  methods: {
    selectVisibleOnly() {
      this.visibleItems.forEach(item => {
        item.selected = true
      })
    }
  }
}

注意事项

深层对象监听需要配合 Vue.set 或展开运算符确保响应式更新

部分选中状态（indeterminate）可通过计算属性实现：

isIndeterminate() {
return this.items.some(item => item.selected) && !this.selectAll
}

服务端分页场景需单独处理全选逻辑，通常需要记录已选ID集合而非直接操作DOM

使用vue实现全选

标签: 全选 vue

分享给朋友：

vue实现人脸识别比对

Vue 实现人脸识别比对的方法使用现成的人脸识别 API 通过调用第三方人脸识别 API（如 Face++、百度 AI、腾讯云等）实现比对功能。注册开发者账号获取 API Key 和 Secret，…

vue如何实现到期提醒

实现 Vue 到期提醒功能使用计算属性计算剩余时间在 Vue 组件中定义一个计算属性，计算目标日期与当前日期的差值。通过 Date 对象获取时间戳并计算剩余天数或小时数。 computed:…

vue实现页面截屏

使用html2canvas库实现截屏 html2canvas是一个流行的JavaScript库，可以将DOM元素转换为Canvas图像。在Vue项目中安装html2canvas： npm inst…

vue实现防抖节流

Vue 中实现防抖（Debounce）防抖的核心是延迟执行函数，在连续触发时取消前一次的调用，只执行最后一次。适用于输入框搜索、窗口大小调整等场景。方法1：使用 Lodash 的 _.debo…

vue实现按卡片轮播

实现卡片轮播的基本思路在Vue中实现卡片轮播可以通过结合v-for指令和动态样式绑定完成。核心是维护一个当前显示卡片的索引，通过CSS过渡效果实现平滑切换。基础实现步骤模板部分使用v-for…

vue实现弹窗可切换

实现弹窗可切换的 Vue 方案动态组件切换通过 Vue 的 <component :is="currentComponent"> 动态加载不同弹窗组件，结合 v-if 控制显示状态。…

使用vue实现全选