Bootstrap Blazor Cascader 级联选择组件

原文链接：https://www.cnblogs.com/ysmc/p/16157827.html

Cascader 级联选择

提供各种颜色的下拉选择框

示例

razor

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Primary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Success" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Danger" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Warning" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Info" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Secondary" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
    <div class="col-12 col-sm-6">
        <Cascader TValue="string" Color="Color.Dark" Items="@Items" OnSelectedItemChanged="@OnItemChanged"></Cascader>
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

cs

private static IEnumerable<CascaderItem> GetItems()
{
     var ret = new List<CascaderItem>
     {
          new CascaderItem("Beijing", "北京"),
          new CascaderItem("Shanghai", "上海"),
          new CascaderItem("GuangZhou", "广州"),
     };

     ret[0].AddItem(new CascaderItem("DC", "东城区"));
     ret[0].AddItem(new CascaderItem("XC", "西城区"));
     ret[0].AddItem(new CascaderItem("CY", "朝阳区"));
     ret[0].AddItem(new CascaderItem("CW", "崇文区"));

     ret[0].Items.ElementAt(0).AddItem(new CascaderItem("X", "某某街道"));

     ret[1].AddItem(new CascaderItem("HP", "黄浦区"));
     ret[1].AddItem(new CascaderItem("XH", "徐汇区"));

     return ret;
}

/// <summary>
/// 获得 默认数据集合
/// </summary>
private readonly IEnumerable<CascaderItem> Items = GetItems();


/// <summary>
/// 下拉选项改变时调用此方法
/// </summary>
/// <param name="items"></param>
private Task OnItemChanged(CascaderItem[] items)
{
    return Task.CompletedTask;
}

Attributes 属性

 

参数	说明	类型	可选值	默认值
ShowLabel	是否显示前置标签	bool	true|false	true
DisplayText	前置标签显示文本	string	—	—
PlaceHolder	未选择时的占位显示文字	string	—	点击进行选择 ...
Class	样式	string	—	—
Color	颜色	Color	Primary / Secondary / Success / Danger / Warning / Info / Dark	Primary
IsDisabled	是否禁用	boolean	true / false	false
Items	数据集合	IEnumerable<CascaderItem>	—	—

事件 Event

 

参数	说明	类型
OnSelectedItemChanged	级联选择选项改变时触发此事件	Func<CascaderItem[], Task>

 

 

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor   

2、点击star，如下图，即可完成star，关注项目不迷路：

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　     BA & Blazor ①（795206915）　　　　　　　   BA & Blazor ②（675147445）