Cascader

​

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

Например, если у вас есть каскадный компонент для выбора категории товаров, в первом раскрывающемся меню могут отображаться все доступные категории, такие как “Электроник”, “одежда” и “Книги”. Когда пользователь выбирает “Electronics”, каскадер обновится, чтобы показать подкатегории электроники, такие как “Phones”, “Laptops” и “Tablets”. Это позволяет пользователям быстро и легко перемещаться по иерархическим данным и выбрать нужную им опцию.

​

Свойства

Доступные свойства каскадера. JavaScript может быть написан на чтение или изменение информации о компонентах.

​

Методы

Вы можете использовать другие компоненты для управления компонентом. Мы поддерживаем следующие два метода:

• setValue

Чтобы установить выбранную опцию, например, {{”value1”}}

• clearValue

Чтобы очистить значение выбранного компонента

Пример использования:

Компонент Cascader поддерживает прослушивание события onChange других компонентов, используя встроенную систему событий. Настройте его, следуя следующим примерам:

1. Добавить срабатывание события к компоненту, который вы хотите прослушивать. Например, если вы хотите прослушать событие onChange компонента Радио группы, добавьте триггер события к этому компоненту Радио Группы.
2. В обработчике события Редактирование выберите Control component в действии, выберите компонент Cascader, который вы хотите обновить в качестве цели события.
3. Выберите действие SetValue и выберите соответствующее значение для компонента Cascader. Это будет значение, которое имеет компонент Cascader и будет обновляться при срабатывании события.
4. Сохраните настройки триггера событий и повторите процесс для всех других компонентов, которые вы хотите прослушивать.

Как только вы настроили триггеры событий, компонент ввода Каскадера будет автоматически обновляться всякий раз, когда на других компонентах запускается событие onChange. Это позволяет создавать динамические интерфейсы, отвечающие на ввод пользователя в режиме реального времени, упростить навигацию и взаимодействие с приложением.

​

Обработчик события

​

Данные

Компонент имеет несколько распространенных данных, которые можно вызвать через {{componentName.propertyName}} в приложении.

Пример: {{cascader1.value[0]}

​

Вариант использования

Далее мы продемонстрируем, как настроить отображение данных от источника данных до параметров в каскадере.

​

Шаг 1 Добавить действие

Давайте создадим таблицу в Supabase project, а также подтаблицу therapist, которая выровнена project_id.

Затем мы можем создать новое действие для Supabase из списка действий, перечислить все данные в проекте и имя supabasedb1

ВЫБЕРИТЕ [project.id](http://project.id/) как project_id, [therapist.name](http://therapist.name/) как therapist_name от терапевта присоединиться к проекту therapist.project_id = [project.id](http://project.id/)

​

Шаг 2 Преобразование данных

Далее мы можем включить секцию transformer в разделе Select Section. В текстовой области мы можем отображать только те значения и метки, которые нам нужны в данных и превращать их в дружественные каскадные опции, используя JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current. roject_id);
  если (существует) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    существующий. hildren.push(therapist);
  } else {
    const project = { value: current. roject_id, знак: current.project_name, children: [] };
    consttherapist = { value: current.therapist_id, label: current.therapist_name };
    project.children. ush(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

Окончательное действие должно быть показано таким же как и

Нажмите Сохранить и Выполнить для активации этого действия.

​

Шаг 3 Настройка компонента

После перетаскивания компонента каскадера на холст, можно нажать один клик, чтобы настроить его источник данных на {{supabasedb1.data}}

Необязательно: здесь мы установили значение {{['a', '1']}} для соответствующих {{['Psychotherapy'], ['James']}}.