高级列表组件ReList
高级列表组件ReList
组件实现基于
Vue3+Element Plus+Typescript,同时引用vueUse+lodash-es+tailwindCss(不影响功能,可忽略)
主要基于JSX风格实现高度动态的列表渲染组件,可以通过信息配置Metas配置控制信息项展示,同时支持render函数自定义渲染。
提供两种风格的List展示方式,以及两种布局方式,再搭配Metas配置,可以实现多种多样的List展示方式,能够满足日常80%的展示方式。
基于这个列表组件,扩展了分页列表,滚动加载列表,虚拟列表等应用组件。
思路
基于Vue3 对 JSX(TSX)的支持,利用JSX的高度动态渲染方式,进行List项的渲染。将每个列表项信息的渲染独立成一个JSX渲染,然后根据布局控制每个信息的展示顺序来实现一个高度动态的列表。
其次,通过metas配置控制列表信息项的展示,只有需要展示才进行渲染,同时支持自定义render渲染,基于vue3的h方法,除次之外,提供作用域插槽用于整个列表项的自定义渲染(只有组件不满足您想要的时候在考虑)。
基础
通过 metas 字段配置列表项展示内容。支持配置列表项内容对于的数据字段,自定义渲染,绑定事件,自定义样式类。

查看 /demo/list/basic.md
可选择
设置 checkable 字段开启列表可选中,支持绑定 checks 获取当前的选中列表,需要指定 rowKey 字段指定绑定值

查看 /demo/list/checkable.md
可展开
设置 expandable 字段开启列表项展开控制,默认会隐藏 content/description 内容信息。试着改变布局观察不同效果。

查看 /demo/list/expandable.md
自定义操作列
通过 metas 字段配置 actions 可以自定义操作按钮组渲染。actions的配置与其他几个内容字段配置有些差别,注意区分

查看 /demo/list/actions.md
垂直布局
通过 itemLayout 字段指定列表项的布局展示,type=list 和 type=card 均支持。试着改变布局观察不同效果。


查看 /demo/list/layout.md
列表页头/页脚
通过 title 属性或者 title / extra 插槽控制列表页头展示,通过 footer 插槽自定义列表页脚展示。

查看 /demo/list/header.md
卡片列表
设置 type=card 切换列表展示风格。



查看 /demo/list/card.md
响应网格卡片列表
卡片列表支持多列展示,能够更好的满足卡片布局风格。可以通过 grid 指定网格列数,每个卡片列表项默认占1格(不可改)。

查看 /demo/list/grid.md
卡片操作列
卡片风格的列表,操作按钮组支持调整显示位置。可以设置 action-position 为 card-footer 将操作按钮组放置在卡片页脚位置,这是一种常见的布局展示方式。


查看 /demo/list/card-footer.md
自定义渲染
metas 字段配置展示内容,支持自定义render函数实现自定义渲染,但有时候我们需要整个列表项都自定义时,使用render函数渲染比较麻烦,可以通过default默认插槽实现自定义渲染。default插槽作为作用域插槽,支持item、metas两个作用域参数字段。

查看 /demo/list/slot-scoped.md
ReList属性
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| items | 必填,列表项数据集 | Record<string, any>[] | - |
| metas | 必填,列表项展示配置 | ReListItemMetas | - |
| title | 列表标题 | string | - |
| checks(v-model) | 绑定勾选值 | Array<string | number> | - |
| rowKey | 列表项主键,作为modelValue绑定值 | string | “id” |
| split | 是否显示分割线 | boolean | true |
| border | 是否显示边框 | boolean | false |
| loading | 加载状态 | boolean | false |
| rowClassName | 自定义列表项样式类 | string | - |
| customClass | 自定义List容器样式类 | string | - |
| hover | 是否显示悬浮样式 | boolean | true |
| expandable | 是否可展开,仅在type="list"下有效 | boolean | false |
| checkable | 是否可选,不同列表风格下交互不同 | boolean | false |
| ghost | 是否去掉内边距 | boolean | false |
| type | 列表类型 | “card” | “list” | “list” |
| grid | 响应网格,仅在type="card"下有效 | number | ReGridResponsive | 1 |
| gutter | 网格间距,仅在type="card"下有效 | number | [number] | [number, number] | 16 |
| action-position | 附加操作栏位置,仅在type="card"下有效 | “default” | “card-footer” | “default” |
| avatar-position | 头像展示位置 | “left” | “right” | “left” |
| avatarHideInExpanded | 是否在折叠时隐藏头像 | boolean | true |
| itemLayout | 列表项布局 | “vertical” | “horizontal” | “horizontal” |
| itemHeight | 列表项高度,内容溢出被隐藏 | number | - |
ReListItemMetas 展示配置
有指定字段则会展示对应信息项
| 字段 | 说明 | 类型 |
|---|---|---|
| avatar | 头像,未指定则不显示 | ReListItemMeta |
| title | 标题,未指定则不显示 | ReListItemMeta |
| subTitle | 副标题,未指定则不显示 | ReListItemMeta |
| content | 正文,未指定则不显示 | ReListItemMeta |
| description | 描述文本,未指定则不显示 | ReListItemMeta |
| actions | 配置操作列,未指定则不显示 | ReListItemAction[] |
types 类型声明:
export interface ReListItemMetas {avatar?: ReListItemMeta; // 头像title?: ReListItemMeta; // 标题subTitle?: ReListItemMeta; // 副标题content?: ReListItemMeta; // 正文description?: ReListItemMeta; // 描述actions?: ReListItemAction[]; // 操作列配置
}export interface ReListItemAction {text?: string; // 操作按钮显示文本props?: Partial<ButtonProps>; // 按钮属性render?: (item: ReListItemProps["item"], expanded?: boolean) => VNode; // 自定义渲染函数events?: ReListItemMeta["events"]; // 绑定事件
}export interface ReListItemMeta {dataIndex?: string; // 数据索引字段,默认按照ReListItemMetas键名customClass?: string; // 自定义样式类style?: string; // 自定义样式render?: (item: ReListItemProps["item"], expanded?: boolean) => VNode; // 自定义渲染函数events?: Record<string, Function>; // 绑定事件
}
ReList事件
| 事件名 | 说明 | 格式 | |
|---|---|---|
| update:checks | 已选中列表发生变化时触发 | (checks: Array<string | number>) => void |
| check | 点击某个复选框时触发 | (checked: boolean, id: string | number, item: Record<string, any>) => void |
ReList插槽
| 插槽名 | 说明 |
|---|---|
| default | 列表项作用域插槽,带有 item、metas 两个作用域变量 |
| title | List页头标题插槽 |
| extra | List页头额外信息插槽 |
| footer | List页脚插槽 |
源代码
Github
可以通过查看具体实现,如果遇到问题可以留言或者提出issue。
如果觉得对您有帮助的话,可以请小编瑞一下


相关文章:
高级列表组件ReList
高级列表组件ReList 组件实现基于 Vue3 Element Plus Typescript,同时引用 vueUse lodash-es tailwindCss (不影响功能,可忽略) 主要基于JSX风格实现高度动态的列表渲染组件,可以通过信息配置Metas配置控制信息项展示,同时支持…...
Vxe UI vue vxe-table 实现表格数据分组功能,根据字段数据分组
Vxe UI vue vxe-table 实现表格数据分组功能,根据字段数据分组 实现数据分组功能 基于树结构功能就可以直接实现数据分组功能,代码如下: <template><div><vxe-button status"primary" click"listToGroup()&…...
oracle创建账户
1、查看表空间 SELECT tablespace_name FROM user_tablespaces;2、创建用户 CREATE USER FLINKCDC2 IDENTIFIED BY "123456";也可以使用指定表空间的方式 CREATE USER FLINKCDC2 IDENTIFIED BY "123456" DEFAULT TABLESPACE LOGMINER_TBS QUOTA UNLIMIT…...
2024新型数字政府综合解决方案(五)
新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术,打造了一个智能化、透明化和高效的政务服务平台,旨在提升政府服务的响应速度、处理效率和数据安全性。该方案实现了跨部门的数据共享与实时更新,通过智能化的流程自动…...
datawind可视化查询-其他函数
飞书文档学习链接:https://www.volcengine.com/docs/4726/47275 1. 用户名函数 用户名函数并非 ClickHouse 官方函数,而是与项目用户信息相结合,用于返回当前使用用户的指定信息的函数。 USERNAME()可返回当前用户的用户名,如下所示。该函数也可与其他函数组合使用 2. J…...
数据库MySQL之事务、索引
目录 1.概述 2.事务 3.索引 3.1索引结构 3.2操作语法 1.概述 场景:假如我们需要解散教学部,那么该部门下的所有员工都需要删除。如果教学部成功删除了,但员工出于某些原因(比如SQL语句写错了等)并没有删除,此时就会出现数据…...
AI学习记录 - transformers的decoder和encoder中的自注意力矩阵和掩码矩阵的数据处理
掩码掩码,指的是掩盖住后面的词汇的词向量对我当前词汇造成影响。把PAD字符设置成负无穷大,概念上不叫掩码,只是计算方式和掩码一样。 怎么生成掩码,在非掩码注意力矩阵中,把PAD词向量每个维度设置成负无穷大…...
【Solidity】代币
ERC20 ERC-20 全称 “Ethereum Request for Comment 20”,是一种标准接口,用于实现代币合约。ERC20 标准定义了一组函数和事件,使得代币可以在不同的应用和平台之间互操作。 ERC20 标准接口定义了一组必须实现的函数和事件: in…...
5 - Linux YUM仓库及NFS共享服务
目录 一、YUM概述 1.YUM简介 2.软件仓库的提供方式 3.RPM软件包的来源 4. yum 命令的运用 二、搭建ftp YUM仓库 三、NFS共享服务 1.NFS简述 2.模拟NFS 一、YUM概述 1.YUM简介 YUM(Yellow dog Updater Modified)是一个专门为了解决包的依赖关系…...
上传文件,文件类型限制语法,各种媒体视频文件的Content-Type
各种媒体视频文件的Content-Type “application/x-apple-diskimage”: “DMG”, “application/epubzip”: “EPUB”, “application/java-archive”: “JAR”, “video/x-matroska”: “MKV”, “text/html”: “HTML|HTM”, “text/css”: “CSS”, “text/javascript…...
类和对象(下)(2)
类和对象(下)(2) static成员 • ⽤static修饰的成员变量,称之为静态成员变量,静态成员变量⼀定要在类外进⾏初始化。 • 静态成员变量为当前类的所有对象所共享,不属于某个具体的对象,不存在对象中&#…...
软件测试 - 自动化测试(概念)(Java)(自动化测试分类、web自动化测试、驱动、selenium自动化测试工具的安装)
一、自动化的概念 ⾃动洒⽔机,主要通上⽔就可以⾃动化洒⽔并且可以⾃动的旋转。 ⾃动洗⼿液,免去了⼿动挤压可以⾃动感应出洗⼿液 超市⾃动闸⻔,不需要⼿动的开⻔关⻔ ⽣活中的⾃动化案例有效的减少了⼈⼒的消耗,同时也提⾼了⽣…...
wpf datagrid 实现双向绑定
前台 <DataGridAutoGenerateColumns"False"Background"White"CanUserAddRows"True"Grid.Row"1"RowEditEnding"DataGrid_OnRowEditEnding"RowHeight"60"SelectionUnit"CellOrRowHeader"x:Name"…...
使用循环在el-select下拉框中循环出-3至50
问: 使用循环在el-select下拉框中循环出-3至50 回答: <el-form-itemprop"adPosition"label"广告位置":rules"{required: true, message: 广告位置不能为空, trigger: change}" ><el-select v-model"addDataForm.adPosition"…...
全球海事航行通告解析辅助决策系统
“全球海事航行通告解析辅助决策系统”是一个针对海事行业设计的智能系统,旨在帮助海上导航和航运操作人员解析和应对全球发布的海事航行通告。 要做这样的系统我们必须要了解海事签派员的日常工作。 海事签派员,也称为船舶操作员或船运调度员࿰…...
Spring 解决bean的循环依赖
Spring循环依赖-博客园 1. 什么是循环依赖 2. 循环依赖能引发什么问题 循环依赖可能引发以下问题: 初始化顺序不确定:循环依赖导致无法确定哪个对象应该先被创建和初始化,从而造成初始化顺序的混乱。这可能导致错误的结果或意外的行为。死…...
鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main
阅读之前的说明 先说明,本篇很长,也很枯燥,若不是绝对的技术偏执狂是看不下去的.将通过一段简单代码去跟踪编译成ELF格式后的内容.看看ELF究竟长了怎样的一副花花肠子,用readelf命令去窥视ELF的全貌,最后用objdump命令…...
seq2seq编码器encoder和解码器decoder详解
编码器 在序列到序列模型中,编码器将输入序列(如一个句子)转换为一个隐藏状态序列,供解码器生成输出。编码层通常由嵌入层和RNN(如GRU/LSTM)等组成 Token:是模型处理文本时的基本单元,可以是词,子词,字符…...
前端使用 Konva 实现可视化设计器(21)- 绘制图形(椭圆)
本章开始补充一些基础的图形绘制,比如绘制:直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的,并以绘制圆/椭形为实现目标。 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,…...
Python 将单词拆分为单个字母组成的列表对象
Python 将单词拆分为单个字母组成的列表对象 正文 正文 这里介绍一个简单算法,将英文单词拆分为其对应字母组成的列表。 str1 ACG lst1 [i for i in str1] lst2 list(str1)# Method 1 print(lst1) # Method 2 print(lst2) """ result: [A, C, G…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
