Checkbox

Checkbox в Element Plus предоставляет возможность создания интерактивных флажков для выбора одного или нескольких значений. Компонент поддерживает одиночные и групповые варианты, имеет гибкую настройку состояния, внешнего вида и поведения.

<template>
  <el-checkbox v-model="checked">Выбор</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  }
};
</script>

В данном примере v-model связывает значение чекбокса с переменной checked. При установке галочки переменная получает значение true, при снятии — false.

Использование группы Checkbox (Checkbox Group)

Для случаев, когда требуется несколько взаимосвязанных опций, применяется компонент el-checkbox-group. Он позволяет управлять массивом выбранных значений.

<template>
  <el-checkbox-group v-model="selectedFruits">
    <el-checkbox label="apple">Яблоко</el-checkbox>
    <el-checkbox label="banana">Банан</el-checkbox>
    <el-checkbox label="orange">Апельсин</el-checkbox>
  </el-checkbox-group>
</template>

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

Здесь массив selectedFruits автоматически обновляется при изменении состояния каждого чекбокса. Значения каждого чекбокса берутся из свойства label.

Ключевые особенности:

  • v-model синхронизирует массив выбранных значений с состоянием группы.
  • label определяет уникальное значение для каждого чекбокса.
  • Можно использовать disabled для блокировки отдельных опций.

Свойства Checkbox

Свойство Описание Тип Значение по умолчанию
model-value Привязка состояния чекбокса Boolean / Array false / []
label Значение, возвращаемое при выборе String / Number —
true-label Значение при активном состоянии String / Number true
false-label Значение при неактивном состоянии String / Number false
disabled Блокировка чекбокса Boolean false
border Отображение рамки вокруг чекбокса Boolean false
size Размер компонента String —
name Атрибут name для формы String —

Методы и события

События Checkbox:

  • change — вызывается при изменении состояния. Передает новое значение.
<el-checkbox v-model="checked" @change="handleChange">Выбор</el-checkbox>

<script>
export default {
  data() {
    return { checked: false };
  },
  methods: {
    handleChange(value) {
      console.log('Новое состояние:', value);
    }
  }
};
</script>
  • Для Checkbox Group событие change возвращает массив выбранных значений.
<el-checkbox-group v-model="selected" @change="onGroupChange">
  <el-checkbox label="a">A</el-checkbox>
  <el-checkbox label="b">B</el-checkbox>
</el-checkbox-group>

<script>
export default {
  data() {
    return { selected: [] };
  },
  methods: {
    onGroupChange(values) {
      console.log('Выбранные значения:', values);
    }
  }
};
</script>

Стилизация и размер

Размеры чекбоксов контролируются через атрибут size, который принимает значения:

  • medium
  • small
  • mini
<el-checkbox size="small" v-model="checkedSmall">Малый</el-checkbox>

Рамка вокруг чекбокса добавляется с помощью свойства border:

<el-checkbox v-model="checked" border>С рамкой</el-checkbox>

Также доступна кастомизация через классы и SCSS-переменные Element Plus для изменения цвета галочки, фона и размеров.

Динамическое управление списком Checkbox

Checkbox Group легко интегрируется с динамическими массивами:

<el-checkbox-group v-model="selected">
  <el-checkbox v-for="item in options" :key="item.value" :label="item.value">
    {{ item.label }}
  </el-checkbox>
</el-checkbox-group>

<script>
export default {
  data() {
    return {
      options: [
        { label: 'Яблоко', value: 'apple' },
        { label: 'Банан', value: 'banana' },
        { label: 'Апельсин', value: 'orange' }
      ],
      selected: []
    };
  }
};
</script>

Это позволяет динамически создавать чекбоксы на основе данных из API или локальных массивов.

Использование Checkbox с формами

Checkbox полностью интегрируется с компонентами Form Element Plus. Можно указать валидацию, использовать обязательные поля и автоматически получать значения при отправке формы.

<el-form :model="form" ref="formRef">
  <el-form-item label="Выберите фрукты" prop="fruits">
    <el-checkbox-group v-model="form.fruits">
      <el-checkbox label="apple">Яблоко</el-checkbox>
      <el-checkbox label="banana">Банан</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-button @click="submitForm">Отправить</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: { fruits: [] }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) console.log('Форма отправлена', this.form);
      });
    }
  }
};
</script>

Advanced: Индивидуальные состояния для Checkbox Group

  • Минимум и максимум выбора реализуются через свойства min и max.
<el-checkbox-group v-model="selected" :min="1" :max="2">
  <el-checkbox label="a">A</el-checkbox>
  <el-checkbox label="b">B</el-checkbox>
  <el-checkbox label="c">C</el-checkbox>
</el-checkbox-group>
  • Если выбранных элементов меньше min или больше max, автоматически запрещается выбор лишних опций.

Итоговая структура применения Checkbox

  1. Одиночный Checkbox для одного булевого значения.
  2. Checkbox Group для множественного выбора с привязкой к массиву.
  3. События change для реакции на изменения состояния.
  4. Стилизация и размеры через size и border.
  5. Динамическое создание чекбоксов через v-for.
  6. Интеграция с формами для валидации и управления данными.
  7. Контроль минимального и максимального выбора через min и max.

Эта структура позволяет использовать Checkbox в любых интерфейсах Element Plus — от простых настроек до сложных форм с динамическими данными и пользовательскими ограничениями.

Оглавление