Как добавить раскрывающийся список в LWC (веб-компонент Lightning)

Чтобы добавить раскрывающийся список в LWC (веб-компонент Lightning), вы можете воспользоваться несколькими способами. Вот несколько примеров с кодом:

Метод 1: использование статического списка
В этом методе вы определяете статический список значений раскрывающегося списка в файле JavaScript вашего компонента и перебираете их в шаблоне HTML для создания параметров раскрывающегося списка.

HTML-шаблон (example.html):

<template>
  <lightning-combobox
    name="picklistField"
    label="Picklist Field"
    value={selectedValue}
    options={picklistOptions}
  ></lightning-combobox>
</template>

Файл JavaScript (example.js):

import { LightningElement } from 'lwc';
export default class Example extends LightningElement {
  selectedValue;
  picklistOptions = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ];
}

Метод 2: динамическое получение значений раскрывающегося списка
В этом методе вы вызываете Apex для получения значений раскрывающегося списка с сервера и динамического заполнения параметров.

HTML-шаблон (example.html):

<template>
  <lightning-combobox
    name="picklistField"
    label="Picklist Field"
    value={selectedValue}
    options={picklistOptions}
  ></lightning-combobox>
</template>

Файл JavaScript (example.js):

import { LightningElement, wire } from 'lwc';
import getPicklistValues from '@salesforce/apex/Controller.getPicklistValues';
export default class Example extends LightningElement {
  selectedValue;
  picklistOptions;
  @wire(getPicklistValues)
  wiredPicklistValues({ error, data }) {
    if (data) {
      this.picklistOptions = data.map((value) => ({
        label: value,
        value: value,
      }));
    } else if (error) {
      // handle error
    }
  }
}

В обоих методах вы можете настроить значения и метки раскрывающегося списка в соответствии с вашими конкретными требованиями.