vue 实现多选框

实现多选框的基础用法

在Vue中可以使用v-model指令绑定到数组类型的数据，实现多选框功能。基础示例代码如下：

<template>
  <div>
    <input type="checkbox" id="option1" value="Option1" v-model="selectedOptions">
    <label for="option1">Option 1</label>

    <input type="checkbox" id="option2" value="Option2" v-model="selectedOptions">
    <label for="option2">Option 2</label>

    <input type="checkbox" id="option3" value="Option3" v-model="selectedOptions">
    <label for="option3">Option 3</label>

    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

动态生成多选框列表

当选项数据来自API或需要动态生成时，可以使用v-for指令：

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

全选/全不选功能实现

添加一个控制全选的复选框，使用计算属性和方法实现全选逻辑：

<template>
  <div>
    <input 
      type="checkbox" 
      id="selectAll" 
      v-model="allSelected"
      @change="toggleAll"
    >
    <label for="selectAll">Select All</label>

    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ],
      selectedOptions: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.selectedOptions.length === this.options.length
      },
      set(value) {
        this.selectedOptions = value ? this.options.map(opt => opt.value) : []
      }
    }
  }
}
</script>

使用第三方组件库实现

Element UI的多选框组件示例：

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      cities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
      checkedCities: []
    }
  }
}
</script>

表单验证中的多选框

在使用Vuelidate进行表单验证时，可以确保至少选择一个选项：

<template>
  <form @submit.prevent="submit">
    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :value="option.value" 
        v-model="form.selectedOptions"
        @blur="$v.form.selectedOptions.$touch()"
      >
      <label>{{ option.label }}</label>
    </div>
    <div v-if="$v.form.selectedOptions.$error">
      Please select at least one option
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ],
      form: {
        selectedOptions: []
      }
    }
  },
  validations: {
    form: {
      selectedOptions: {
        required
      }
    }
  },
  methods: {
    submit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>