当前位置：首页 > VUE

vue 实现列表全选

2026-01-19 06:42:15VUE

实现列表全选功能

在Vue中实现列表全选功能，可以通过绑定数据和事件处理来实现。以下是一个完整的示例代码：

vue 实现列表全选

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </li>
    </ul>
  </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: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

核心实现原理

使用v-model双向绑定selectedItems数组来存储选中的项目ID
计算属性selectAll用于判断是否全选状态，并处理全选/取消全选的逻辑
当点击全选复选框时，toggleSelectAll方法会触发计算属性的setter

扩展功能实现

如果需要显示已选中项目数量，可以添加以下计算属性：

vue 实现列表全选

computed: {
  selectedCount() {
    return this.selectedItems.length
  }
}

在模板中添加显示：

<p>已选中 {{ selectedCount }} 个项目</p>

注意事项

确保每个项目有唯一的id属性
selectedItems数组存储的是选中项目的id值
计算属性的getter和setter需要正确处理全选状态和项目选择状态的同步

与后端交互

当需要将选中项提交到后端时，可以直接使用selectedItems数组：

methods: {
  submitSelected() {
    axios.post('/api/selected', { items: this.selectedItems })
      .then(response => {
        console.log('提交成功')
      })
  }
}