vue实现多选和全选

实现多选功能

在 Vue 中实现多选功能通常使用 v-model 绑定一个数组来存储选中的项。以下是一个基础示例：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="selectedItems"
      >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  }
}
</script>

实现全选功能

全选功能可以通过计算属性或方法来实现。以下是一个结合全选的完整示例：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="allSelected"
        @change="toggleAll"
      >
      全选
    </div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="selectedItems"
        @change="updateAllSelected"
      >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      allSelected: false
    }
  },
  methods: {
    toggleAll() {
      if (this.allSelected) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    },
    updateAllSelected() {
      this.allSelected = this.selectedItems.length === this.items.length
    }
  }
}
</script>

使用计算属性优化

计算属性可以更优雅地处理全选状态：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="allSelectedComputed"
      >
      全选
    </div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="selectedItems"
      >
      {{ 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: {
    allSelectedComputed: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  }
}
</script>

注意事项

• 确保 v-model 绑定的 selectedItems 初始值为数组
• 当数据项动态变化时，需要额外处理全选状态
• 如果使用对象而非ID作为值，需要注意引用比较问题

完整组件示例

以下是一个更完整的表格多选组件示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>
            <input 
              type="checkbox" 
              v-model="allSelectedComputed"
            >
          </th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>
            <input 
              type="checkbox" 
              :value="item.id" 
              v-model="selectedItems"
            >
          </td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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