TreeView允许用户选择一个或多个节点。您还可以用自己的代码预先选择它们。
属性来配置节点选择行为SelectionMode属性的成员TreeViewSelectionMode枚举:
方法获取或设置所选项设置selecteditem参数。这是一个IEnumerable <对象>收集。选择允许双向绑定(@bind-SelectedItems)和单向绑定+SelectedItemsChanged
如果要从中提取所选内容的详细信息设置selecteditem，您需要将集合强制转换为正确的模型类型。这是必需的，因为您可以绑定树视图 到每个级别的不同模型类型。下面的例子演示了这种方法——我们将选定的项目转换为特定的模型，以获得其详细信息并在TreeView之外显示它们。
观察节点选择是如何工作的，并预选第二个节点。*@ @if (SelectedItems.Any()) { TreeItem selectedItem = SelectedItems.FirstOrDefault() as TreeItem; Selected item:
} @code { public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } public FontIcon? Icon { get; set; } } public IEnumerable SelectedItems { get; set; } = new List(); public IEnumerable Data { get; set; } public IEnumerable ExpandedItems { get; set; } = new List(); protected override void OnInitialized() { LoadData(); ExpandedItems = TreeData.Where(x => x.HasChildren == true).ToList(); // Preselection of the second node (not required) SelectedItems = new List() { Data.Skip(1).FirstOrDefault() }; } private void LoadData() { List items = new List(); items.Add(new TreeItem() { Id = 1, Text = "Project", ParentId = null, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 2, Text = "Design", ParentId = 1, HasChildren = true, Icon = FontIcon.Brush }); items.Add(new TreeItem() { Id = 3, Text = "Implementation", ParentId = 1, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 4, Text = "site.psd", ParentId = 2, HasChildren = false, Icon = FontIcon.FilePsd }); items.Add(new TreeItem() { Id = 5, Text = "index.js", ParentId = 3, HasChildren = false, Icon = FontIcon.Js }); items.Add(new TreeItem() { Id = 6, Text = "index.html", ParentId = 3, HasChildren = false, Icon = FontIcon.Html5 }); items.Add(new TreeItem() { Id = 7, Text = "styles.css", ParentId = 3, HasChildren = false, Icon = FontIcon.Css }); Data = items; } }
