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

高级列表组件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-positioncard-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是否显示分割线booleantrue
border是否显示边框booleanfalse
loading加载状态booleanfalse
rowClassName自定义列表项样式类string-
customClass自定义List容器样式类string-
hover是否显示悬浮样式booleantrue
expandable是否可展开,仅在type="list"下有效booleanfalse
checkable是否可选,不同列表风格下交互不同booleanfalse
ghost是否去掉内边距booleanfalse
type列表类型“card” | “list”“list”
grid响应网格,仅在type="card"下有效number | ReGridResponsive1
gutter网格间距,仅在type="card"下有效number | [number] | [number, number]16
action-position附加操作栏位置,仅在type="card"下有效“default” | “card-footer”“default”
avatar-position头像展示位置“left” | “right”“left”
avatarHideInExpanded是否在折叠时隐藏头像booleantrue
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 两个作用域变量
titleList页头标题插槽
extraList页头额外信息插槽
footerList页脚插槽

源代码

Github

可以通过查看具体实现,如果遇到问题可以留言或者提出issue。

如果觉得对您有帮助的话,可以请小编瑞一下

在这里插入图片描述

在这里插入图片描述

相关文章:

高级列表组件ReList

高级列表组件ReList 组件实现基于 Vue3 Element Plus Typescript&#xff0c;同时引用 vueUse lodash-es tailwindCss (不影响功能&#xff0c;可忽略) 主要基于JSX风格实现高度动态的列表渲染组件&#xff0c;可以通过信息配置Metas配置控制信息项展示&#xff0c;同时支持…...

Vxe UI vue vxe-table 实现表格数据分组功能,根据字段数据分组

Vxe UI vue vxe-table 实现表格数据分组功能&#xff0c;根据字段数据分组 实现数据分组功能 基于树结构功能就可以直接实现数据分组功能&#xff0c;代码如下&#xff1a; <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新型数字政府综合解决方案(五)

新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术&#xff0c;打造了一个智能化、透明化和高效的政务服务平台&#xff0c;旨在提升政府服务的响应速度、处理效率和数据安全性。该方案实现了跨部门的数据共享与实时更新&#xff0c;通过智能化的流程自动…...

datawind可视化查询-其他函数

飞书文档学习链接:https://www.volcengine.com/docs/4726/47275 1. 用户名函数 用户名函数并非 ClickHouse 官方函数,而是与项目用户信息相结合,用于返回当前使用用户的指定信息的函数。 USERNAME()可返回当前用户的用户名,如下所示。该函数也可与其他函数组合使用 2. J…...

数据库MySQL之事务、索引

目录 1.概述 2.事务 3.索引 3.1索引结构 3.2操作语法 1.概述 场景&#xff1a;假如我们需要解散教学部&#xff0c;那么该部门下的所有员工都需要删除。如果教学部成功删除了&#xff0c;但员工出于某些原因(比如SQL语句写错了等)并没有删除&#xff0c;此时就会出现数据…...

AI学习记录 - transformers的decoder和encoder中的自注意力矩阵和掩码矩阵的数据处理

掩码掩码&#xff0c;指的是掩盖住后面的词汇的词向量对我当前词汇造成影响。把PAD字符设置成负无穷大&#xff0c;概念上不叫掩码&#xff0c;只是计算方式和掩码一样。 怎么生成掩码&#xff0c;在非掩码注意力矩阵中&#xff0c;把PAD词向量每个维度设置成负无穷大&#xf…...

【Solidity】代币

ERC20 ERC-20 全称 “Ethereum Request for Comment 20”&#xff0c;是一种标准接口&#xff0c;用于实现代币合约。ERC20 标准定义了一组函数和事件&#xff0c;使得代币可以在不同的应用和平台之间互操作。 ERC20 标准接口定义了一组必须实现的函数和事件&#xff1a; in…...

5 - Linux YUM仓库及NFS共享服务

目录 一、YUM概述 1.YUM简介 2.软件仓库的提供方式 3.RPM软件包的来源 4. yum 命令的运用 二、搭建ftp YUM仓库 三、NFS共享服务 1.NFS简述 2.模拟NFS 一、YUM概述 1.YUM简介 YUM&#xff08;Yellow dog Updater Modified&#xff09;是一个专门为了解决包的依赖关系…...

上传文件,文件类型限制语法,各种媒体视频文件的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)

类和对象&#xff08;下&#xff09;(2) static成员 • ⽤static修饰的成员变量&#xff0c;称之为静态成员变量&#xff0c;静态成员变量⼀定要在类外进⾏初始化。 • 静态成员变量为当前类的所有对象所共享&#xff0c;不属于某个具体的对象&#xff0c;不存在对象中&#…...

软件测试 - 自动化测试(概念)(Java)(自动化测试分类、web自动化测试、驱动、selenium自动化测试工具的安装)

一、自动化的概念 ⾃动洒⽔机&#xff0c;主要通上⽔就可以⾃动化洒⽔并且可以⾃动的旋转。 ⾃动洗⼿液&#xff0c;免去了⼿动挤压可以⾃动感应出洗⼿液 超市⾃动闸⻔&#xff0c;不需要⼿动的开⻔关⻔ ⽣活中的⾃动化案例有效的减少了⼈⼒的消耗&#xff0c;同时也提⾼了⽣…...

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

全球海事航行通告解析辅助决策系统

“全球海事航行通告解析辅助决策系统”是一个针对海事行业设计的智能系统&#xff0c;旨在帮助海上导航和航运操作人员解析和应对全球发布的海事航行通告。 要做这样的系统我们必须要了解海事签派员的日常工作。 海事签派员&#xff0c;也称为船舶操作员或船运调度员&#xff0…...

Spring 解决bean的循环依赖

Spring循环依赖-博客园 1. 什么是循环依赖 2. 循环依赖能引发什么问题 循环依赖可能引发以下问题&#xff1a; 初始化顺序不确定&#xff1a;循环依赖导致无法确定哪个对象应该先被创建和初始化&#xff0c;从而造成初始化顺序的混乱。这可能导致错误的结果或意外的行为。死…...

鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main

阅读之前的说明 先说明&#xff0c;本篇很长&#xff0c;也很枯燥&#xff0c;若不是绝对的技术偏执狂是看不下去的.将通过一段简单代码去跟踪编译成ELF格式后的内容.看看ELF究竟长了怎样的一副花花肠子&#xff0c;用readelf命令去窥视ELF的全貌&#xff0c;最后用objdump命令…...

seq2seq编码器encoder和解码器decoder详解

编码器 在序列到序列模型中&#xff0c;编码器将输入序列&#xff08;如一个句子&#xff09;转换为一个隐藏状态序列&#xff0c;供解码器生成输出。编码层通常由嵌入层和RNN&#xff08;如GRU/LSTM)等组成 Token:是模型处理文本时的基本单元&#xff0c;可以是词,子词,字符…...

前端使用 Konva 实现可视化设计器(21)- 绘制图形(椭圆)

本章开始补充一些基础的图形绘制&#xff0c;比如绘制&#xff1a;直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的&#xff0c;并以绘制圆/椭形为实现目标。 请大家动动小手&#xff0c;给我一个免费的 Star 吧~ 大家如果发现了 Bug&#xff0c…...

Python 将单词拆分为单个字母组成的列表对象

Python 将单词拆分为单个字母组成的列表对象 正文 正文 这里介绍一个简单算法&#xff0c;将英文单词拆分为其对应字母组成的列表。 str1 ACG lst1 [i for i in str1] lst2 list(str1)# Method 1 print(lst1) # Method 2 print(lst2) """ result: [A, C, G…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...