Transfer

Компонент Transfer предназначен для организации двустороннего переноса элементов между двумя списками. Он часто используется в сценариях, где требуется выбор нескольких элементов из общего набора и распределение их между «доступными» и «выбранными» категориями.

Основная структура

Компонент реализуется через тег <el-transfer> и имеет следующие ключевые атрибуты:

<el-transfer
  v-model="targetKeys"
  :data="data"
  :props="props"
  filterable
  :titles="['Доступно', 'Выбрано']"
  :button-texts="['Добавить', 'Удалить']"
  :render-content="renderFunc"
/>
  • v-model="targetKeys" – связывает компонент с массивом ключей элементов, которые находятся в целевом списке.
  • :data="data" – массив объектов с элементами, доступными для переноса. Каждый объект должен содержать уникальный ключ.
  • :props="props" – позволяет задать сопоставление полей объекта для корректного отображения (key, label, disabled).
  • filterable – включает возможность поиска элементов в списках.
  • :titles – задаёт заголовки для исходного и целевого списков.
  • :button-texts – подписи для кнопок переноса.
  • :render-content – функция для кастомного рендеринга элементов.

Пример данных и конфигурации

data() {
  return {
    data: [
      { key: 1, label: 'Элемент 1', disabled: false },
      { key: 2, label: 'Элемент 2', disabled: true },
      { key: 3, label: 'Элемент 3', disabled: false },
    ],
    targetKeys: [3],
    props: {
      key: 'key',
      label: 'label',
      disabled: 'disabled',
    },
  };
}
  • key – уникальный идентификатор элемента.
  • label – текст, который будет отображаться в списке.
  • disabled – если true, элемент нельзя переносить.

Кастомизация отображения элементов

Для вывода сложного содержимого вместо простого текста используется атрибут render-content:

methods: {
  renderFunc(h, option) {
    return h('span', {}, [
      `${option.label} (ID: ${option.key})`
    ]);
  }
}
  • Функция получает объект элемента и должна возвращать VNode.
  • Позволяет вставлять HTML, иконки, стили и дополнительные данные в каждый элемент списка.

Фильтрация элементов

Включение фильтрации осуществляется через атрибут filterable. По умолчанию поиск производится по полю label, но можно задать кастомный поиск через событие filter-method:

<el-transfer
  v-model="targetKeys"
  :data="data"
  filterable
  :filter-method="customFilter"
/>

methods: {
  customFilter(query, item) {
    return item.label.toLowerCase().includes(query.toLowerCase());
  }
}
  • query – введённая пользователем строка.
  • item – объект текущего элемента.
  • Возвращаемое значение true отображает элемент, false – скрывает.

Управление событиями

Компонент поддерживает несколько событий для контроля действий пользователя:

  • change – вызывается при переносе элементов между списками.
methods: {
  handleChange(newTargetKeys, direction, moveKeys) {
    console.log(newTargetKeys, direction, moveKeys);
  }
}
  • left-check-change и right-check-change – реагируют на выделение элементов в списках.
methods: {
  handleCheckChange(checkedKeys, direction) {
    console.log(checkedKeys, direction);
  }
}
  • left-arrow-click и right-arrow-click – события нажатия кнопок переноса.

Настройка кнопок переноса

Можно полностью изменить подписи кнопок или использовать иконки:

<el-transfer
  :button-texts="['Вправо', 'Влево']"
  :render-content="renderFunc"
/>

Если требуется условно отключать кнопки, используется атрибут disabled на элементе или настройка глобального disabled для всего компонента.

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

  • Размер компонента регулируется атрибутом size (medium, small, mini).
  • Дополнительные CSS-классы можно добавлять через class и list-class-name для кастомного оформления списков.
  • Списки автоматически поддерживают прокрутку при превышении высоты по умолчанию.

Практические рекомендации

  • Для больших наборов данных использовать виртуализацию через сторонние плагины, так как Transfer рендерит все элементы сразу.
  • Для динамически меняющихся списков обновлять data через реактивные свойства Vue.
  • Для сложных операций с элементами использовать комбинацию событий change и filter-method.

Эта конфигурация обеспечивает полный контроль над компонентом Transfer: от визуального отображения и фильтрации до событий и кастомной логики переноса элементов между списками.

Оглавление