首页 > 其他分享 >AntDesignBlazor示例——创建列表页

AntDesignBlazor示例——创建列表页

时间:2023-12-02 16:37:38浏览次数:31  
标签:示例 表头 列表 AntDesignBlazor 组件 Table 模板

本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。

示例代码仓库:https://gitee.com/known/AntDesignDemo

1. 学习目标

  • 使用Table组件创建列表页面
  • 使用DisplayName特性显示中文表头
  • 使用模板和Tag组件显示高温数据
  • 使用TitleTemplate自定义栏位表头

2. 创建Table列表

1)双击打开Components\Pages\Weather.razor页面组件,删除如下代码。

image

2)添加如下Table组件,将天气数据绑定到DataSource属性上,定义列表属性栏位。

image

3)点击运行按钮,效果如下:

image

3. 显示中文表头

1)优化列表字段显示为中文名称,在WeatherForecast类的属性上添加DisplayName特性,需要引用命名空间@using System.ComponentModel

image

2)点击运行按钮,效果如下:

image

4. 使用模板显示高温数据

1)优化列表温度栏,当温度大于30时用红色标记显示,这里需要用到模板列,模板中用Tag组件来显示高温数据,优化代码如下:

image

2)点击运行按钮,效果如下:

image

5. 显示自定义表头

1)使用TitleTemplate自定义温度标题,在标题前插入一个Icon字体图标。

image

2)点击运行按钮,效果如下:

image

6. 总结

关于Table组件的创建和内容显示基本分享这些,标题模板和数据模板基本上满足实际项目需求,具体需求可以通过此例举一反三;其他更多示例可参考AntDesign Blazor的官网文档 https://antblazor.com/zh-CN/components/table

标签:示例,表头,列表,AntDesignBlazor,组件,Table,模板
From: https://www.cnblogs.com/known/p/17871396.html

相关文章

  • 渲染列表时过长造成卡顿,分批次渲染
    1//this.tableData=res.data;//直接赋值页面卡顿2//分批渲染3(function(arr,_this){4leti=0;5//合并列表6constmerge=(arr2,iTime)=>{7setTimeout(()=>{8_this.tableData=[..._this.tableData,...arr2];//赋值......
  • 使用ASIRequest库进行Objective-C网络爬虫示例
    使用ASIRequest库进行Objective-C网络爬虫示例在Objective-C中,ASIHTTPRequest是一个非常受欢迎的库,用于处理HTTP请求。它可用于下载网页内容,处理API请求,甚至进行复杂的网络交互。下面是一个简单的示例,展示了如何使用ASIHTTPRequest库来爬取网页代码。首先,你需要在你的项目中导入ASI......
  • 使用 Lua 和 lua-resty-request 库下载代码示例
    随着互联网的快速发展,网络请求已经成为了许多应用程序中不可或缺的一部分。在local resty_request=require "resty.request" local http=resty_request.new()local url="http://example.com/file.txt" --要下载的文件的URL地址local path ="/path/to/file.txt" ......
  • 通过PowerShellPlus示例脚本学习PowerShell-使用SMO创建MSSQL任务
    ##=====================================================================##Title:Create-MSSQLJob-UsingSMO##Description:CreateadailySQLjobtocallapowershellscript##Author:Idera##Date:9/1/2008##Input:-serve......
  • 列表操作符与函数 airScript 1
    #组合操作符并不改变原来的列表的值a=[1,1,1,2]b=[2,2,2,3]c=a+b#print(c)#重复运算符*#print(b*3)##成员资格操作符in#print(2inb)#函数a=[1,2,3,1,1,1]#a.append("haha")#print(a)#b=[3,4,5]a=[1,2,3,1,1,1]#a.extend(b)#改变了a的值,#print......
  • 341. 扁平化嵌套列表迭代器
    341.扁平化嵌套列表迭代器2021年3月23日没有代码提示的我快死了就是个遍历……只要知道函数和方法就没什么难度注意尝试迭代,不要用递归classNestedIterator{private:intcurInteger;stack<pair<vector<NestedInteger>::iterator,vector<NestedInteger>::ite......
  • 查找 - 散列表
    散列表(哈希)相关定义散列表:有限连续的地址空间。冲突:不同关键字对应同一个散列地址。冲突是不可避免的。同义词:发生冲突的不同关键字。构造散列函数原则减少冲突。散列地址分布均匀。常用方法直接定址1)条件:已知关键字每一位的数字分布情况。2)操作:从关键字中提取......
  • 麻烦问一下Python采集到的文本列表中有大量的 ', ' 符号 想这种符号怎么删除
    大家好,我是皮皮。一、前言前几天在Python铂金流群【泅渡】问了一个Python字符处理的问题,一起来看看吧。问题描述:麻烦问一下Python采集到的文本列表中有大量的  ','  符号 想这种符号怎么删除?二、实现过程这里【不上班能干啥!】和【瑜亮老师】分别给了一个指导,如下......
  • # yyds干货盘点 # 麻烦问一下Python采集到的文本列表中有大量的 ', ' 符号 想这种符号
    大家好,我是皮皮。一、前言前几天在Python铂金流群【泅渡】问了一个Python字符处理的问题,一起来看看吧。问题描述:麻烦问一下Python采集到的文本列表中有大量的  ','  符号 想这种符号怎么删除?二、实现过程这里【不上班能干啥!】和【瑜亮老师】分别给了一个指导,如下图所示:......
  • 一个callbacks示例
    一个callbacks示例dlaicourse/Course1-Part4-Lesson4-Notebook.ipynbatmaster·lmoroney/dlaicourse(github.com)importtensorflowastfclassmyCallback(tf.keras.callbacks.Callback):defon_epoch_end(self,epoch,logs={}):if(logs.get('a......