Чтобы добавить раскрывающийся список в 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
}
}
}
В обоих методах вы можете настроить значения и метки раскрывающегося списка в соответствии с вашими конкретными требованиями.