当前位置：首页 > 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>

进阶实现：独立组件封装

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

使用vue实现全选

组件代码

<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>

性能优化方案

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

示例代码片段

使用vue实现全选

// 在长列表场景中
{
  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实现tablegrid

Vue 实现 TableGrid 的方法使用 Element UI 的 Table 组件 Element UI 提供了强大的 Table 组件，可以快速实现表格布局。安装 Element UI 后，…

vue实现网站

Vue 实现网站的基本步骤 Vue.js 是一个渐进式 JavaScript 框架，适合构建现代化的单页应用（SPA）或动态网站。以下是使用 Vue 实现网站的基本方法。初始化 Vue 项目使用…

vue实现路径

Vue 实现路径的方法在 Vue 中实现路径管理通常涉及 Vue Router 的使用，以下是一些常见的实现方法：安装 Vue Router 通过 npm 或 yarn 安装 Vue Route…

vue实现fragment

Vue 实现 Fragment 的方法在 Vue 中，Fragment 允许组件返回多个根节点而不需要包裹一个额外的 DOM 元素。以下是几种实现方式：使用 Vue 3 的 <templa…

vue 实现原理

Vue 实现原理 Vue.js 是一个渐进式 JavaScript 框架，其核心实现原理主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是 Vue 实现原理的核心要点：响应式系统 Vu…

vue实现修改

Vue 实现修改功能的方法在 Vue 中实现修改功能通常涉及表单绑定、状态管理和 API 调用。以下是几种常见实现方式：双向数据绑定实现表单修改使用 v-model 指令绑定表单元素与组件数据…

使用vue实现全选