例图
目前的样式是这样的：
其中角色在一个table里，然后可以增删改查，并且可以给指定的用户分配权限。
创建文件
首先我们在Pages/Admin目录下新建一个Role.razor。因为我们的Admin目录已经使用了_Import来给整个文件夹添加了授权特性，所以我们就无需再次添加了。
添加table
这里添加一个table来显示所有的角色。
<Table TItem="RoleEntity" IsBordered="true" ShowAddButton="true" ShowToolbar="true" ShowExtendButtons="true" ShowDeleteButtonCallback="entity => entity.Id != 1" OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync"> <TableColumns> <TableColumn @bind-Field="@context.Name"></TableColumn> </TableColumns> <RowButtonTemplate> <TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="编辑权限" OnClick="() => RoleClick(context)"></TableCellButton> </RowButtonTemplate> </Table>这里稍微解释一下这个Table。
ShowAddButton="true" ShowToolbar="true"让table显示工具栏并且显示添加按钮。
ShowExtendButtons="true"显示每行的扩展按钮。
ShowDeleteButtonCallback="entity => entity.Id != 1"这个注意一下，我们要保留一个管理员权限不能删除，所以我们这里强制让RoleId=1的列不显示删除按钮，这样我们就不能删除这一列了。
OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync"这两个方法一个是查询时使用的，返回数据。一个是保存时使用的，修改的数据入库。
<TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="编辑权限" OnClick="() => RoleClick(context)"></TableCellButton>这里我们新增一个按钮，这个按钮就叫编辑权限，里面我们可以给这个角色赋权。
编写方法
OnQueryAsync:
private Task<QueryData<RoleEntity>> OnQueryAsync(QueryPageOptions arg) { var roles = RoleEntity.Select.IncludeMany(x => x.Permissions).Page(arg.PageIndex, arg.PageItems) .Count(out var count).ToList(); return Task.FromResult<QueryData<RoleEntity>>(new QueryData<RoleEntity>() { TotalCount = (int)count, Items = roles }); }这里没啥说的，就是使用分页参数来分页，并且返回总行数和分页数据。这里我们不涉及搜索之类的高级选项，所以整体非常简单。
OnSaveAsync：
private Task<bool> OnSaveAsync(RoleEntity arg1, ItemChangedType arg2) { arg1.Save(); return Task.FromResult<bool>(true); }这个处理更简单，直接Save就好了。
RoleClick:
private void RoleClick(RoleEntity roleEntity) { RoleEntity = roleEntity; Menus = CascadingTree(MenuEntity.Select.ToList(), roleEntity.Permissions, new TreeViewItem<MenuEntity>(new MenuEntity())).ToList(); RoleModal?.Toggle(); } private IEnumerable<TreeViewItem<MenuEntity>> CascadingTree(IEnumerable<MenuEntity> items, IEnumerable<MenuEntity>? selectedItems, TreeViewItem<MenuEntity> parent) => items.Where(i => i.ParentId == parent.Value.Id).Select(i => { var item = new TreeViewItem<MenuEntity>(i) { Text = i.Name, Icon = i.Icon, Value = i }; item.Items = CascadingTree(items, selectedItems, item).ToList(); item.Parent = parent; if (selectedItems?.Any(x => x.Id == i.Id) == true) { item.CheckedState = CheckboxState.Checked; } return item; });这里的分配权限点击后有两个事要做，一个是获取到所有的Menu，并且做成TreeItem的List，并且根据本身的权限给tree进行勾选。另一个就是打开Modal。
添加Modal
这里我们直接使用Modal来做了，理解起来相对比较简单，如果是正式项目，建议还是使用Dialog来做，更清晰一些。
这里我们在项目里继续加上Modal
<Modal @ref="RoleModal"> <ModalDialog Title="编辑权限"> <BodyTemplate> <TreeView TItem="MenuEntity" Items="@Menus" ShowCheckbox="true" AutoCheckParent="true" AutoCheckChildren="true"></TreeView> </BodyTemplate> <FooterTemplate> <Button OnClick="SavePermission">保存</Button> </FooterTemplate> </ModalDialog> </Modal>这个Modal只有一个功能，就是在Save的时候获取到所有的已勾选权限，存库。
private void SavePermission() { if (RoleEntity == null) { return; } var menus = new List<MenuEntity>(); SaveRole(Menus!.Where(x => x.CheckedState != CheckboxState.UnChecked), menus); RoleEntity.Permissions = menus; RoleEntity.SaveMany(nameof(RoleEntity.Permissions)); RoleModal?.Toggle(); } private void SaveRole(IEnumerable<TreeViewItem<MenuEntity>> items, List<MenuEntity> menus) { menus.AddRange(items.Select(x => x.Value)); foreach (var treeViewItem in items) { if (treeViewItem.Items.Any(x => x.CheckedState != CheckboxState.UnChecked)) { SaveRole(treeViewItem.Items.Where(x => x.CheckedState != CheckboxState.UnChecked), menus); } } }代码在Github：https://github.com/j4587698/BlazorLearn，分支lesson10。
