0

所以我目前几乎有一个下拉列表（用于过滤目的），您可以从列表中选择一个水果，该列表几乎是一个包含 FruitDtos 的列表，它工作得非常好。但是，我想添加一个“全部”选项，但我不确定如何做到这一点。

在 .razor 文件中看起来像这样：

                <Addon AddonType="AddonType.Body">
                    <Select TValue="int" SelectedValue="@SelectedListValue" SelectedValueChanged="@OnFruitChanged">
                        @foreach (FruitDto item in _fruitsList)
                        {
                            <SelectItem Disabled="@(item.FruitId == 0)" Value="@item.FruitId">@item.Name</SelectItem>
                        }
                    </Select>
                </Addon>

所以 _fruitsList 包含所有 FruitDtos。有没有办法让用户一次选择所有这些？Tbh，我最想要这个选项，因为现在您需要刷新页面才能“取消选择”/删除过滤器。

int SelectedListValue { get; set; }
[Parameter] public FruitDto Fruit { get; set; }
        private async Task OnFruitChanged(int newValue)
        {
            SelectedListValue = newValue;

            Fruit = _fruitsList.Find(s => s.FruitId == newValue);
            await FruitChanged.InvokeAsync(Fruit);
            StateHasChanged();
        }

FruitDto 只包含一个字符串 Name 和 int FruitId。

4

1 回答 1

0

Blazorise 的 Select 组件也提供了“Multiple”选项。这可能适用于您的要求。请注意，我确实删除了 Disabled 属性，因为我不确定它是如何使用的。

。剃刀：

<Select TValue="int" Multiple="true" SelectedValuesChanged="@OnFruitChanged">
    @foreach (FruitDto item in _fruitsList)
    {
        <SelectItem Value="@item.FruitId">@item.Name</SelectItem>
    }
</Select>

。CS：

protected List<int> SelectedListValues { get; set; }

protected void OnFruitChanged(IReadOnlyList<int> newValues)
{
    SelectedListValues = newValues.ToList();
}

如果您想清除列表，您可以添加一个按钮“清除过滤器”，该按钮将在 OnClick 上清除列表。

于 2021-10-29T01:07:11.323 回答