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

AntDesignBlazor示例——创建列表页

本示例是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组件显示高温数据使…...

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

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

es常用查询编辑

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

记录 | 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…...

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…...

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…...

MySQL:找回root密码

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

计算机网络扫盲(1)——因特网

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

C语言 if语句有无(;)分号问题

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

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

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

【langchain实战】开源项目-RasaGPT

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

在线yml和properties相互转换

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

数据收集与处理(爬虫技术)

文章目录 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 …...

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

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

什么是通配符证书?

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

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

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

LeetCode 每日一题 Day 4

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

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

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

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:…...

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

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...