Списки выбора — это важный компонент веб-компонентов Lightning (LWC), предоставляющий пользователям выбор предопределенных параметров. В этой статье мы рассмотрим различные методы добавления списков выбора в LWC, а также примеры кода. Давайте погрузимся!

Метод 1: использование Lightning-Combobox
Компонент Lightning-Combobox — это встроенный компонент LWC, который предоставляет раскрывающийся список параметров. Вот пример того, как его использовать:

<template>
    <lightning-combobox
        name="selectOption"
        label="Select an Option"
        options={options}
        onchange={handleChange}
        value={selectedOption}
    ></lightning-combobox>
</template>

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track selectedOption;
    options = [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ];
    handleChange(event) {
        this.selectedOption = event.detail.value;
    }
}

Метод 2: использование Lightning-Select
Компонент Lightning-Select — это еще один встроенный компонент, который отображает раскрывающийся список. Вот пример:

<template>
    <lightning-select
        name="selectOption"
        label="Select an Option"
        options={options}
        onchange={handleChange}
        value={selectedOption}
    ></lightning-select>
</template>

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track selectedOption;
    options = [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
    ];
    handleChange(event) {
        this.selectedOption = event.detail.value;
    }
}

Метод 3: динамическое заполнение параметров
Иногда может потребоваться динамическое получение параметров из источника данных. Вот пример динамического заполнения параметров:

<template>
    <lightning-combobox
        name="selectOption"
        label="Select an Option"
        options={dynamicOptions}
        onchange={handleChange}
        value={selectedOption}
    ></lightning-combobox>
</template>

import { LightningElement, track } from 'lwc';
import getOptions from '@salesforce/apex/MyController.getOptions';
export default class MyComponent extends LightningElement {
    @track selectedOption;
    @track dynamicOptions;
    connectedCallback() {
        getOptions()
            .then((result) => {
                this.dynamicOptions = result;
            })
            .catch((error) => {
                // Handle error
            });
    }
    handleChange(event) {
        this.selectedOption = event.detail.value;
    }
}

В этой статье мы рассмотрели несколько способов добавления списков выбора в LWC. Мы рассмотрели использование встроенных компонентов, таких как Lightning-Combobox и Lightning-Select, а также параметры динамического заполнения из источника данных. Используя эти методы, вы можете улучшить взаимодействие с пользователем, предоставив ему интуитивно понятный выбор.