当前位置： 首页 > news >正文

AntDesignBlazor示例——创建列表页

news 2026/2/8 3:26:05

本示例是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 。

7. 视频

https://www.bilibili.com/video/BV1XN411L775/

相关文章：

AntDesignBlazor示例——创建列表页

本示例是AntDesign Blazor的入门示例，在学习的同时分享出来，以供新手参考。 示例代码仓库：https://gitee.com/known/AntDesignDemo 1. 学习目标 使用Table组件创建列表页面使用DisplayName特性显示中文表头使用模板和Tag组件显示高温数据使…...

编程日记 2023/12/6 19:29:41

微信小程序模板选择指南：如何找到靠谱的平台？

随着移动互联网的快速发展，越来越多的企业和商家都在微信小程序上开展业务。而他们也希望可以通过微信小程序模板快速搭建小程序，那么如何才能找到一个靠谱的微信小程序模板平台呢？下面给大家简单讲解一下。 首先要知道的是，微信小…...

编程日记 2023/12/6 19:26:39

es常用查询编辑

查询指定id信息 GET /index_name/_doc/1074266245查询指定信息并降序 GET /index_name/_search {"query": {"term": {"deviceId": {"value": "1074266245"}}}, "sort": [{"timestamp": {"order&qu…...

编程日记 2023/12/6 19:25:38

记录 | linux静态库和动态库的理解

hello.cpp&#xff1a; #include <cstdio>void hello() {printf("Hello, world!\n"); }main.cpp&#xff1a; #include <cstdio>void hello();int main() {hello();return 0; }静态库编译配置&#xff1a; cmake_minimum_required(VERSION 3.12) proj…...

编程日记 2023/12/6 19:23:37

ParBFT: Faster Asynchronous BFT Consensus with a Parallel Optimistic Path

目录 笔记后续的研究方向摘要引言 ParBFT: Faster Asynchronous BFT Consensus with a Parallel Optimistic Path CCS 2023 笔记 后续的研究方向 摘要 为了减少异步拜占庭容错&#xff08;BFT&#xff09;共识的延迟和通信开销&#xff0c;通常会添加一条乐观的路径&#xf…...

编程日记 2023/12/6 19:21:34

java小工具util系列3：JSON转实体类对象工具

文章目录 准备工作1.JSONObject获取所有的key2.集合中实体对象转换 list中Enrey转Dto3.字符串转List<BusyTimeIndicatorAlarmThreshold>4.json字符串转JSONObject5.list根据ids数组过滤list6.json字符串转JavaBean对象7.json对象转javabean8.jsonObject转map9.List\<U…...

编程日记 2023/12/6 19:20:33

MySQL：找回root密码

一、情景描述 我们在日常学习中&#xff0c;经常会忘记自己的虚拟机中MySQL的root密码。 这个时候&#xff0c;我们要想办法重置root密码&#xff0c;从而&#xff0c;解决root登陆问题。 二、解决办法 1、修改my.cnf配置文件并重启MySQL 通过修改配置文件&#xff0c;来跳…...

编程日记 2023/12/6 19:19:32

计算机网络扫盲（1）——因特网

一、概述 因特网是一个世界范围的计算机网络&#xff0c;即它是一个互联了遍及全世界数十亿计算设备的网络。大家对此应该并不陌生&#xff0c;我们身边有着不计其数的计算机设备被接入了因特网&#xff0c;如今计算机网络这个术语似乎已经有点过时了&#xff0c;用因特网的术语…...

编程日记 2023/12/6 19:17:31

C语言 if语句有无（；）分号问题

在C语言中&#xff0c;if语句后面不带分号&#xff08;;&#xff09;的情况有两种主要形式&#xff1a; 1. 带有大括号的代码块&#xff1a;如果if语句后面跟随一个由大括号&#xff08;{}&#xff09;包围的代码块&#xff0c;那么这个代码块中的语句只有在if条件为真时才会执…...

编程日记 2023/12/6 19:16:30

Python-列表详解（列表的创建、用法、遍历、注意事项、特点等）

本文有以下内容&#xff1a; 列表的创建 列表的下标索引注意事项 列表的访问 列表的增加元素 列表的删除元素 列表的任意删除元素 列表的查找元素 列表的查找元素位置 列表的插入任意位置 列表的遍历 列表的拼接方式 列表的切片操作以及注意事项 列表类似于其他语言的数组 列…...

编程日记 2023/12/6 19:15:29

【langchain实战】开源项目-RasaGPT

1、概述 RasaGpt是一个建立在 Rasa 和 Langchain 之上的没有显示界面的LMM聊天机器人平台。它是一个Rasa和Telegram这种利用像Langchain这样的LMM库进行索引、检索和上下文注入的样板及参考实现。 开源地址&#xff1a; GitHub - paulpierre/RasaGPT: &#x1f4ac; RasaGPT is…...

编程日记 2023/12/6 19:10:25

在线yml和properties相互转换

目前搜索到的大部分代码都存在以下问题&#xff1a; 复杂结构解析丢失解析后顺序错乱 所以自己写了一个&#xff0c;经过不充分测试&#xff0c;基本满足使用。可以直接在线使用 在线地址 除了yml和properties互转之外&#xff0c;还可以生成代码、sql转json等&#xff0c;可…...

编程日记 2023/12/6 19:07:22

数据收集与处理（爬虫技术）

文章目录 1 前言2 网络爬虫2.1 构造自己的Scrapy爬虫2.1.1 items.py2.1.2 spiders子目录2.1.3 pipelines.py 2.2 构造可接受参数的Scrapy爬虫2.3 运行Scrapy爬虫2.3.1 在命令行运行2.3.2 在程序中调用 2.4 运行Scrapy的一些要点 3 大规模非结构化数据的存储与分析4 全部代码 1 …...

编程日记 2023/12/6 19:06:21

C# 雪花算法生成Id工具类

写在前面 传说自然界中并不存在两片完全一样的雪花的&#xff0c;每一片雪花都拥有自己漂亮独特的形状、独一无二&#xff1b;雪花算法也表示生成的ID如雪花般独一无二&#xff0c;该算法源自Twitter。 雪花算法主要用于解决分布式系统的唯一Id生成问题&#xff0c;在生产环境…...

编程日记 2023/12/6 19:04:19

什么是通配符证书？

通配符证书是一种特殊的数字证书&#xff0c;主要用于加密网站与用户之间的通信&#xff0c;以保证数据的私密性和完整性。它的独特之处在于可以使用一个单一的证书来保护无限数量的相关子域名。它使用通配符字符&#xff08;*&#xff09;作为占位符&#xff0c;代表任意子域名…...

编程日记 2023/12/6 19:00:16

西南科技大学模拟电子技术实验五（集成运算放大器的应用设计）预习报告

一、计算/设计过程 设计一：用集成运放设计一个输入为0.05v，放大为-100的反相比例运算电路。 对于理想电路，反相比例运算电路的输出电压与输入电压之间的关系如下： =-100，所以 =100 若是假定R1为100k，则R2= =1k 为了减小输入级偏置电流引起的运算误差，在同相输入端…...

编程日记 2023/12/6 18:59:15

LeetCode 每日一题 Day 4

2477. 到达首都的最少油耗 给你一棵 n 个节点的树&#xff08;一个无向、连通、无环图&#xff09;&#xff0c;每个节点表示一个城市&#xff0c;编号从 0 到 n - 1 &#xff0c;且恰好有 n - 1 条路。0 是首都。给你一个二维整数数组 roads &#xff0c;其中 roads[i] [ai,…...

编程日记 2023/12/6 18:58:14

服务器数据恢复—重装系统导致XFS文件系统分区丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 服务器使用磁盘柜RAID卡搭建了一组riad5磁盘阵列。服务器上层分配了一个LUN&#xff0c;划分了两个分区&#xff1a;sdc1分区和sdc2分区。通过LVM扩容的方式&#xff0c;将sdc1分区加入到了root_lv中&#xff1b;sdc2分区格式化为XFS文件系统。…...

编程日记 2023/12/6 18:53:10

Scala 从入门到精通

Scala 从入门到精通 数据类型 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:…...

编程日记 2023/12/6 18:52:09

华为OD机试 - 九宫格按键输入 - 逻辑分析（Java 2023 B卷 200分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…...

编程日记 2023/12/6 18:51:08

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/7 23:18:39

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2026/2/1 21:34:47

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/11/27 20:15:13