vue实现单选多选

Vue 实现单选功能

使用 v-model 绑定单选按钮的值，确保同一组单选按钮的 name 属性相同。

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1" name="options">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2" name="options">
      Option 2
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

Vue 实现多选功能

使用 v-model 绑定多选框的值，通常是一个数组。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectedOptions" value="option1">
      Option 1
    </label>
    <label>
      <input type="checkbox" v-model="selectedOptions" value="option2">
      Option 2
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

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

使用组件库实现单选多选

Element UI 提供了 el-radio 和 el-checkbox 组件，简化单选和多选的实现。

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
    </el-radio-group>
    <p>Selected option: {{ selectedOption }}</p>

    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox label="option1">Option 1</el-checkbox>
      <el-checkbox label="option2">Option 2</el-checkbox>
    </el-checkbox-group>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

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

动态生成单选或多选选项

通过 v-for 动态渲染选项列表，适用于选项数据来自后端或动态变化的场景。

<template>
  <div>
    <div v-for="option in radioOptions" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value">
      {{ option.label }}
    </div>
    <p>Selected option: {{ selectedOption }}</p>

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

<script>
export default {
  data() {
    return {
      radioOptions: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      checkboxOptions: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      selectedOption: '',
      selectedOptions: []
    }
  }
}
</script>

表单验证

结合 Vue 的表单验证库（如 VeeValidate）对单选和多选进行验证。

<template>
  <div>
    <ValidationProvider rules="required" v-slot="{ errors }">
      <div v-for="option in radioOptions" :key="option.value">
        <input type="radio" v-model="selectedOption" :value="option.value">
        {{ option.label }}
      </div>
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <ValidationProvider rules="required" v-slot="{ errors }">
      <div v-for="option in checkboxOptions" :key="option.value">
        <input type="checkbox" v-model="selectedOptions" :value="option.value">
        {{ option.label }}
      </div>
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
</template>

<script>
import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  },
  data() {
    return {
      radioOptions: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      checkboxOptions: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ],
      selectedOption: '',
      selectedOptions: []
    }
  }
}
</script>