vue实现多选题

Vue实现多选题的方法

使用Vue实现多选题功能，可以通过v-model绑定数组、动态渲染选项、以及处理选中状态来实现。以下是一个完整的实现示例：

基础实现代码

<template>
  <div>
    <h3>请选择您喜欢的编程语言（多选）</h3>
    <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>已选择: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'js', label: 'JavaScript' },
        { value: 'py', label: 'Python' },
        { value: 'java', label: 'Java' },
        { value: 'c', label: 'C' }
      ],
      selectedOptions: []
    }
  }
}
</script>

动态选项绑定

当选项需要从API获取时，可以这样实现：

export default {
  data() {
    return {
      options: [],
      selectedOptions: []
    }
  },
  async created() {
    this.options = await fetchOptionsFromAPI()
  }
}

表单验证

添加必选验证：

<template>
  <form @submit.prevent="submitForm">
    <!-- 选项代码同上 -->
    <span v-if="error" style="color: red">{{ error }}</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    submitForm() {
      if (this.selectedOptions.length === 0) {
        this.error = '请至少选择一项'
        return
      }
      // 提交逻辑
    }
  }
}
</script>

自定义组件实现

创建可复用的多选组件：

<!-- MultiSelect.vue -->
<template>
  <div>
    <label>{{ label }}</label>
    <div v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        :id="`${name}-${option.value}`"
        :value="option.value"
        v-model="internalValue"
      >
      <label :for="`${name}-${option.value}`">{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Array,
    options: Array,
    label: String,
    name: String
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

使用自定义组件

<template>
  <multi-select
    v-model="selectedOptions"
    :options="options"
    label="选择技术栈"
    name="tech-stack"
  />
</template>

<script>
import MultiSelect from './MultiSelect.vue'

export default {
  components: { MultiSelect },
  data() {
    return {
      options: [
        { value: 'vue', label: 'Vue.js' },
        { value: 'react', label: 'React' },
        { value: 'angular', label: 'Angular' }
      ],
      selectedOptions: []
    }
  }
}
</script>

样式优化

添加CSS美化复选框：

/* 添加在style标签中 */
input[type="checkbox"] {
  margin-right: 8px;
}
label {
  cursor: pointer;
  user-select: none;
}

全选/全不选功能

添加全选控制：

<template>
  <div>
    <input type="checkbox" id="select-all" v-model="selectAll">
    <label for="select-all">全选</label>
    <!-- 原有选项代码 -->
  </div>
</template>

<script>
export default {
  computed: {
    selectAll: {
      get() {
        return this.selectedOptions.length === this.options.length
      },
      set(val) {
        this.selectedOptions = val 
          ? this.options.map(opt => opt.value) 
          : []
      }
    }
  }
}
</script>

以上方法涵盖了Vue实现多选题的常见需求，可以根据实际项目需要进行组合和调整。