当前位置：首页 > VUE

vue 实现多选框

2026-01-08 06:45:56VUE

Vue 实现多选框的方法

使用 `v-model` 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选框的选择功能。每个复选框的 value 属性会被添加到数组中，取消勾选时则从数组中移除。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: [],
    };
  },
};
</script>

动态生成多选框

如果需要动态生成多选框，可以通过遍历数据源来实现。v-for 指令可以用于渲染多个复选框，并通过 v-model 绑定到同一个数组。

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

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

全选功能

可以通过计算属性或方法实现全选功能。全选按钮的状态可以通过比较已选选项和总选项的数量来判断。

<template>
  <div>
    <label>
      <input
        type="checkbox"
        v-model="selectAll"
        @change="toggleSelectAll"
      />
      Select All
    </label>
    <div v-for="option in options" :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 {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: [],
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedOptions.length === this.options.length;
      },
      set(value) {
        this.selectedOptions = value
          ? this.options.map(option => option.value)
          : [];
      },
    },
  },
};
</script>

使用第三方组件库

如果需要更丰富的功能，可以使用第三方组件库如 Element UI、Vuetify 或 Ant Design Vue 提供的多选框组件。

以 Element UI 为例：

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: [],
    };
  },
};
</script>

表单提交

多选框的值可以通过表单提交到后端。在提交时，selectedOptions 数组会自动包含所有选中的值。

<template>
  <form @submit.prevent="submitForm">
    <div v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        v-model="selectedOptions"
        :value="option.value"
      />
      {{ option.label }}
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: [],
    };
  },
  methods: {
    submitForm() {
      console.log('Submitted options:', this.selectedOptions);
      // 发送到后端
    },
  },
};
</script>

以上方法涵盖了 Vue 中实现多选框的常见场景，包括基本绑定、动态生成、全选功能和表单提交。

vue 实现多选框