当前位置：首页 > VUE

vue实现全选功能

2026-03-29 13:23:54VUE

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="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

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

计算属性 selectAll 判断是否全选
get 方法检查已选项数量是否等于总项数
set 方法根据全选状态更新 selectedItems 数组

方法二：使用对象存储选中状态

使用对象存储每个选项的选中状态
全选按钮通过遍历对象设置状态

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selected: {}
    }
  },
  computed: {
    allSelected: {
      get() {
        return Object.values(this.selected).every(Boolean)
      },
      set(value) {
        Object.keys(this.selected).forEach(key => {
          this.selected[key] = value
        })
      }
    }
  },
  created() {
    this.items.forEach(item => {
      this.$set(this.selected, item.id, false)
    })
  },
  methods: {
    handleSelectAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

使用 $set 确保响应式
初始化时为每个选项创建响应式属性
allSelected 计算属性检查所有选项状态

方法三：使用第三方组件

安装 element-ui 等 UI 库
使用 Table 组件自带的全选功能

npm install element-ui

使用 el-table 实现全选

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
  <el-button @click="toggleSelection">全选/取消</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '选项1' },
        { name: '选项2' },
        { name: '选项3' }
      ],
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection() {
      this.$refs.multipleTable.toggleAllSelection()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>