BulmaRazor

Cascader级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

单选@bind-Value，多选@bind-Values

基本用法

数据源可以从json数据加载过来

视图
代码

Value的值:

请选择

<Content>
    Value的值: @Value
</Content>
<Columns>
    <Column>
        <Cascader Data="data" @bind-Value="Value">
        </Cascader>
    </Column>
    <Column>
        <Cascader Color="Color.Danger" Data="data" @bind-Value="Value" IsSmall>
        </Cascader>
    </Column>
</Columns>


@code{

    string Value = "";
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data1.json";
    List<CascaderItem<string>> data = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

禁用选项

通过在数据源中设置 Disabled 字段来声明该选项是禁用的

视图
代码

请选择

<Cascader style="width:400px;" Data="data" @bind-Value="Val">
</Cascader>

@code{

    string Val = "";
    static string dataFile = "Pages/data/data2.json";
    List<CascaderItem<string>> data = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
    
}

可清空

通过 Clearable 设置输入框可清空

视图
代码

请选择

<Cascader style="width:400px;" Data="data" Clearable @bind-Value="Val">
</Cascader>

@code{

    string Val = "";
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data1.json";
    List<CascaderItem<string>> data = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

仅显示最后一级

通过设置 ShowAllLevels="false" 可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。

视图
代码

请选择

<Cascader style="width:400px;" Data="data" @bind-Value="Val" Clearable ShowAllLevels="false">
</Cascader>

@code{

    string Val = "";
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data1.json";
    List<CascaderItem<string>> data = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

多选

可通过 IsMultiple = true 来开启多选模式

在开启多选模式后，默认情况下会展示所有已选中的选项的Tag可通过 IsCollapseTags = true 来折叠Tag

视图
代码

Val:

请选择

<p>Val:@string.Join(",",Vals)</p>
<Columns>
    <Column>
        <Cascader Color="Color.Primary" style="width:400px;" Data="data1" @bind-Values="Vals" Clearable IsMultiple>
        </Cascader>

    </Column>
    <Column>
        <Cascader style="width:400px;" Data="data1" @bind-Values="Vals" Clearable IsMultiple IsCollapseTags>
        </Cascader>
    </Column>

</Columns>

@code{

    HashSet<string> Vals = new HashSet<string>();
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data2.json";
    List<CascaderItem<string>> data1 = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
    // List<CascaderItem<string>> data2 = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

选择任意一级选项

可通过设置 IsIsolated = true 让父子节点取消关联选，择任意一级选项。

单选和多选模式都可以使用

视图
代码

请选择

<Columns>
    <Column>
        <Cascader style="width:400px;" Data="data1"  Clearable IsIsolated>
        </Cascader>

    </Column>
    <Column>
        <Cascader style="width:400px;" Data="data2" Clearable IsIsolated IsMultiple>
        </Cascader>
    </Column>

</Columns>

@code{
    
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data1.json";
    List<CascaderItem<string>> data1 = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
    List<CascaderItem<string>> data2 = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

自定义节点内容

可以使用 ItemSlot 自定义选项的节点内容

视图
代码

请选择

<Cascader style="width:400px;" Data="data">
    <ItemSlot>
        @context.Text
        @if (context.Children.Any())
        {
            <span>(@context.Children.Count)</span>    
        }
    </ItemSlot>
</Cascader>

@code{
    
    //下面为了方便，直接从json文件加载数据
    static string dataFile = "Pages/data/data1.json";
    List<CascaderItem<string>> data = Cascader<string>.BuildDataFromJson(System.IO.File.ReadAllText(dataFile));
}

文档