当前位置：首页 > VUE

vue表单全选实现

2026-02-17 19:43:25VUE

Vue 表单全选实现方法

基础实现（基于 v-model）

通过绑定一个全选复选框的 v-model 与子选项的选中状态实现联动：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll" @change="toggleAll">
      全选
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </label>
    </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>

动态计算实现

通过计算属性动态判断全选状态，适用于异步加载数据场景：

<template>
  <!-- 同上模板结构 -->
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItems: []
    }
  },
  computed: {
    selectAll() {
      return this.items.length > 0 && 
             this.selectedItems.length === this.items.length
    }
  },
  methods: {
    handleSelectAll() {
      if (this.selectAll) {
        this.selectedItems = []
      } else {
        this.selectedItems = [...this.items.map(item => item.id)]
      }
    }
  }
}
</script>

表格场景实现

适用于表格行的批量选择，结合 el-checkbox（Element UI 示例）：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55" :selectable="selectable">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    selectable(row, index) {
      return row.status === 'active' // 可添加选择条件
    },
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>

性能优化方案

对于大数据量场景，采用虚拟滚动时建议使用以下策略：

// 在数据量较大时使用 Set 存储选中项
data() {
  return {
    selectedSet: new Set()
  }
},
methods: {
  toggleSelection(id) {
    this.selectedSet.has(id) 
      ? this.selectedSet.delete(id) 
      : this.selectedSet.add(id)
  },
  selectAllItems() {
    this.items.forEach(item => this.selectedSet.add(item.id))
  }
}