vue实现全选 单选

Vue实现全选与单选功能

在Vue中实现全选和单选功能通常涉及数据绑定、事件处理和计算属性的使用。以下是两种常见的实现方式：

基于数组的复选框实现

<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"
          @change="updateSelectAll"
        >
        {{ 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: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : []
    },
    updateSelectAll() {
      this.selectAll = this.selectedItems.length === this.items.length
    }
  }
}
</script>

基于对象属性的实现

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allSelected" @change="selectAllItems">
      全选
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input 
          type="checkbox" 
          v-model="item.selected"
          @change="checkAllSelected"
        >
        {{ item.name }}
      </label>
    </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 }
      ],
      allSelected: false
    }
  },
  methods: {
    selectAllItems() {
      this.items.forEach(item => {
        item.selected = this.allSelected
      })
    },
    checkAllSelected() {
      this.allSelected = this.items.every(item => item.selected)
    }
  }
}
</script>

使用计算属性优化

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allSelected" @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: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

注意事项

• 确保每个选项都有唯一的标识符（如id）
• 使用v-model进行双向数据绑定简化代码
• 计算属性可以自动更新全选状态
• 考虑添加中间状态（部分选中）的情况
• 对于大量数据，考虑性能优化

这些实现方式可以根据具体需求进行调整和组合，Vue的响应式系统使得这类交互功能的实现变得简单高效。