vue实现单元多选

Vue 实现单元多选

在 Vue 中实现单元多选功能，可以通过多种方式完成。以下是几种常见的实现方法，包括使用原生 HTML 复选框、自定义组件以及第三方库。

使用原生 HTML 复选框

通过 v-model 绑定数组实现多选功能。选中项的 value 会被自动添加到数组中。

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

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

使用自定义多选组件

通过自定义组件封装多选逻辑，提高复用性。

<template>
  <div>
    <MultiSelect
      :options="options"
      v-model="selectedOptions"
    />
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

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

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

自定义 MultiSelect.vue 组件：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        :value="option.value"
        @change="handleChange"
        :checked="isChecked(option.value)"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array,
  },
  methods: {
    isChecked(value) {
      return this.value.includes(value);
    },
    handleChange(event) {
      const value = event.target.value;
      const newSelected = [...this.value];
      if (event.target.checked) {
        newSelected.push(value);
      } else {
        const index = newSelected.indexOf(value);
        if (index > -1) {
          newSelected.splice(index, 1);
        }
      }
      this.$emit('input', newSelected);
    },
  },
};
</script>

使用第三方库

使用如 v-select 或 element-ui 等第三方库快速实现多选功能。

以 element-ui 为例：

<template>
  <div>
    <el-select
      v-model="selectedOptions"
      multiple
      placeholder="请选择"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <p>已选择: {{ selectedOptions }}</p>
  </div>
</template>

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

注意事项

• 确保 v-model 绑定的是数组类型，否则多选功能无法正常工作。
• 如果选项数据动态加载，确保在数据加载完成后初始化选中状态。
• 自定义组件时，注意处理 v-model 的双向绑定逻辑。

以上方法可以根据实际需求选择适合的实现方式。原生 HTML 复选框适合简单场景，自定义组件适合需要复用的场景，而第三方库可以快速实现复杂功能。