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

vue3+element-plus el-descriptions 详情组件二次封装(vue3项目)

最终效果

在这里插入图片描述

一、需求

一般后台管理系统,通常页面都有增删改查;而不外乎就是渲染新增/修改的数据(由输入框变成输入框禁用),因为输入框禁用后颜色透明度会降低,显的颜色偏暗;为解决这个需求于是封装了详情组件

二、源码

<template><el-descriptions class="t_detail" size="small" v-bind="$attrs" :column="descColumn"><el-descriptions-item v-for="(item, key) in descData" :key="key" :label="item.label" :span="item.span || 1"v-bind="$attrs"><template v-if="item.slotName"><slot :name="item.slotName"></slot></template><span class="tip_class" v-else><el-tooltip v-bind="$attrs" v-if="item.tooltip" :placement="item.placement || 'bottom'"><span><span v-if="item.filters && item.filters.list">{{constantEscape(dataList[item.fieldName],listTypeInfo[item.filters.list],item.filters.key || 'value',item.filters.label || 'label')}}</span><span v-else>{{ item.value }}</span><el-icon :size="item.iconSize" :color="item.iconColor" style="cursor: pointer;margin-left:2px;top:1px;"><Warning /></el-icon></span><template #content v-if="item.tooltip"><span v-if="typeof item.tooltip === 'string'">{{ item.tooltip }}</span><template v-else-if="typeof item.tooltip === 'function'"><render-tooltip :render="item.tooltip" :item="item" /></template></template></el-tooltip><span v-else><span v-if="item.filters && item.filters.list">{{constantEscape(dataList[item.fieldName],listTypeInfo[item.filters.list],item.filters.key || 'value',item.filters.label || 'label')}}</span><span v-else>{{ item.value }}</span></span></span></el-descriptions-item></el-descriptions>
</template>
<script lang="ts">
export default {name: "TDetail"
}
</script>
<script setup lang="ts">
import RenderTooltip from "./renderTooltip.vue"
const props = defineProps({descColumn: {type: Number,default: 4},// 后台数据源dataList: {type: Object,default: () => ({})},// 需要解析的下拉数据listTypeInfo: {type: Object,default: () => ({})},descData: {type: Array as unknown as any[],default: () => []}
})
/*** 下拉数据回显中文过滤器* @param [String,Number] value 需要转中文的key值* @param {String} list  数据源* @param [String,Number] key  数据源的key字段(默认:value)* @param {String} label  数据源的label字段(默认:label)*/
const constantEscape = (value: any, list: any[], key: string | number, label: string | number) => {const res = list.find((item) => {return item[key] === value})return res && res[label]
}
</script>
<style lang="scss" scoped>
.t_detail {:deep(.el-descriptions__label) {font-weight: bold;min-width: 65px;}
}
</style>

三、参数配置

1、代码示例

<!-- 常规模式 -->
<t-detail :descData="descData" />
<!-- 字典回显模式 -->
<t-detail :descData="descData":dataList="dataList":listTypeInfo=="listTypeInfo" />

2、配置参数(Attributes)

参数说明类型默认值
descData详情页面数据源Array
----label详情字段说明标题String
----value详情字段返回值String
----fieldNamevalue 返回值的字段String
----slotName插槽(自定义 value)slot
----span占用的列宽,默认占用 1 列,最多 4 列Number1
----tooltipvalue 值的提示语String/function
----iconSizetooltip 提示语的 icon 大小String/Number继承字体大小
----iconColortooltip 提示语的 icon 颜色String继承颜色
----filters字典类型(即后台返回的是数字类型)过滤转成中文Object
-------list字典 list 定义的数据名即 listTypeInfo 里面对应的值String
-------key下拉数据源的 key 字段String‘value’
-------label下拉数据源的 label 字段String‘label’
descColumn布局一行显示几列(默认:一行显示 4 列)Number4
dataList开启 filters 时详情接口返回的数据Object{}
listTypeInfo开启 filters 时下拉数据源Object{}

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

基于ElementUi&antdUi再次封装基础组件文档


vue3+ts基于Element-plus再次封装基础组件文档

相关文章:

vue3+element-plus el-descriptions 详情组件二次封装(vue3项目)

最终效果 一、需求 一般后台管理系统&#xff0c;通常页面都有增删改查&#xff1b;而查不外乎就是渲染新增/修改的数据&#xff08;由输入框变成输入框禁用&#xff09;&#xff0c;因为输入框禁用后颜色透明度会降低&#xff0c;显的颜色偏暗&#xff1b;为解决这个需求于是封…...

No.14新一代信息技术

新一代信息技术产业包括&#xff1a;加快建设宽带、泛在、融合、安全的信息忘了基础设施&#xff0c;推动新一代移动通信、下一代互联网核心设备和智能终端的研发及产业化&#xff0c;加快推进三网融合&#xff0c;促进物联网、云计算的研发和示范应用。 大数据、云计算、互联…...

微信小程序开发(五)小程序代码组成2

微信小程序开发&#xff08;五&#xff09;小程序代码组成2 为了进一步加深我们对小程序基础知识的了解和掌握&#xff0c;需要更进一步的了解小程序的代码组成以及一些简单的代码的编写。 参考小程序官方的的代码组成文档&#xff1a;https://developers.weixin.qq.com/ebook?…...

关于tensorboard --logdir=logs的报错解决办法记录

我在运行tensorboard --logdirlogs时&#xff0c;产生了如下的报错&#xff0c;找遍全网后&#xff0c;解决办法如下 先卸载 pip uninstall tensorboard再安装 pip install tensorboard最后出现如下报错 Traceback (most recent call last): File “d:\newanaconda\envs\imo…...

em,rem,px,rpx,vw,vh的区别与使用

在css中单位长度用的最多的是px、em、rem&#xff0c;这三个的区别是&#xff1a;一、px是固定的像素&#xff0c;一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性&#xff0c;他们是相对长度单位&#xff0c;意思是长度不是定死了的&#xff0c;更适…...

Vue+node.js医院预约挂号信息管理系统vscode

网上预约挂号系统将会是今后医院发展的主要趋势。 前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正…...

Java真的不难(五十四)RabbitMQ的入门及使用

RabbitMQ的入门及使用 一、什么是RabbitMQ&#xff1f; MQ全称为Message Queue&#xff0c;即消息队列。消息队列是在消息的传输过程中保存消息的容器。它是典型的&#xff1a;生产者、消费者模型。生产者不断向消息队列中生产消息&#xff0c;消费者不断的从队列中获取消息。…...

Unity | Script Hot Reload

官网地址&#xff1a;https://hotreload.net/ 一、作用 Unity在运行时&#xff0c;可以直接修改代码&#xff0c;避免等待过长的编译时间。 二、说明 1、支持的平台&#xff1f; Windows、MacOS、Linux 2、支持的Unity版本&#xff1f; 2018.4 (LTS)2019.4 (LTS)2020.3 (L…...

3|射频识别技术|第五讲:数据通信和编码技术|第九章:编码与调制|重点理解掌握传输介质中的有线传输介质

计算机网络部分&#xff1a;https://blog.csdn.net/m0_57656758/article/details/128943949传输介质分为有线传输介质和无线传输介质两大类&#xff1b;有线传输介质通常包含双绞线、同轴电缆和光导纤维&#xff1b;无线传输介质包含微波、红外线等。传输介质的选择和连接是网络…...

【遇见青山】基于Redis的Feed流实现案例

【遇见青山】基于Redis的Feed流实现案例1.关注推送2.具体代码实现1.关注推送 关注推送也叫做Feed流&#xff0c;直译为投喂。为用户持续的提供"沉浸式”的体验&#xff0c;通过无限下拉刷新获取新的信息。 Feed流产品有两种常见模式&#xff1a; 这里我们实现基本的TimeL…...

【芯片前端】一文搞定|寄存器组织生成与uvm ral_model环境全流程

前言 本文以组织一个系统(或模块)寄存器为例,进行寄存器与ral生成相关的全流程展示。内容包括如下几个部分: 寄存器文档组织 描述文件与辅助RTL代码结构 ralf/ral/rtl文件代码结构 UVM RAL访问环境组织 寄存器文档组织 在windows路径下组织寄存器文档,格式为excel表格。…...

Leetcode力扣秋招刷题路-0061

从0开始的秋招刷题路&#xff0c;记录下所刷每道题的题解&#xff0c;帮助自己回顾总结 61. 旋转链表 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&…...

xilinx srio ip学习笔记之axistream接口

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 xilinx srio ip学习笔记之axistream接口前言接口转化前言 srio 的IQ接口都是基于axistream的&#xff0c;以前没怎么用过axistream的接口&#xff0c;或者说没怎么用过复杂条…...

轨迹误差评估指标[APE/RPE]和EVO

轨迹误差评估指标[APE/RPE]和EVO1. ATE/APE2. RPE3. EVO3.1 评估指标3.2 使用3.2.1 轨迹可视化3.2.2 APE3.2.3 RPEReference: 高翔&#xff0c;张涛 《视觉SLAM十四讲》视觉SLAM基础&#xff1a;算法精度评价指标&#xff08;ATE、RPE&#xff09; 在实际工程中&#xff0c;我…...

uni-app 消息推送功能UniPush

uni-app 消息推送功能UniPush,这里用的是uni-app自带的UniPush1.0&#xff08;个推服务&#xff09;&#xff0c;所以只针对UniPush1.0介绍实现步骤。 建议查阅的文章&#xff1a; UniPush 1.0 使用指南[2] Unipush 常见问题[3] 当然现在已经出了UniPush2.0&#xff08;HBuilde…...

面试题(二十六)场景应用

1. 场景应用 1.1 微信红包相关问题 参考答案 概况&#xff1a;2014年微信红包使用数据库硬抗整个流量&#xff0c;2015年使用cache抗流量。 微信的金额什么时候算&#xff1f; 微信红包的金额是拆的时候实时算出来&#xff0c;不是预先分配的&#xff0c;采用的是纯内存计…...

密码技术在车联网安全中的应用与挑战

随着智慧交通和无人驾驶的快速发展&#xff0c;车联网产业呈现蓬勃发展态势&#xff0c;车与云、车与车、车与路、车与人等综合网络链接的融合程度越来越高&#xff0c;随之而来的安全挑战也更加严峻。解决车联网的安全问题需要一个整体的防护体系&#xff0c;而密码技术凭借技…...

富媒体数据管理解决方案:简化、优化、自动化

富媒体数据管理解决方案&#xff1a;简化、优化、自动化 适用于富媒体的 NetApp 解决方案有助于简化和降低数据管理成本&#xff0c;优化全球媒体工作流并自动执行媒体资产管理。这将有助于减轻您的负担。 为什么选择 NetApp 的富媒体数据管理解决方案&#xff1f; 成本更低…...

QT入门Input Widgets之QFontComboBox、QTextEdit、QPlainTextEdit、QDial、QKeySequenceEdit

目录 一、QFontComboBox的相关介绍 1、实际使用 二、QTextEdit与QPlainTextEdit 三、QDial的相关介绍 四、QKeySequenceEdit的相关介绍 此文为作者原创&#xff0c;创作不易&#xff0c;转载请标明出处&#xff01; 一、QFontComboBox的相关介绍 1、实际使用 一般使用较…...

Java企业级开发学习笔记

文章目录一、Spring1.1、Slay Dragon1.2、RescueDamselQuest一、Spring 第一周写了两个小项目均使用了原始调用和容器的方法 两个项目&#xff1a;<斩杀大龙与上路保卫战> 配一张文件位置图 1.1、Slay Dragon BraveKnight package net.sherry.spring.day01;public c…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

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

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

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...