vue2+ant-design-vue a-descriptions 详情组件二次封装(vue2项目)

news2024/11/15 0:19:48

最终效果

在这里插入图片描述

一、需求

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

二、源码

<template>
  <div class="t_antd_detail">
    <a-descriptions size="middle" :column="descColumn" v-bind="$attrs">
      <a-descriptions-item
        v-for="(item, key) in descData"
        :key="key"
        :label="item.label"
        :span="item.span || 1"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :scope="item"></slot>
        </template>
        <div v-else>
          <a-tooltip v-bind="$attrs" v-if="item.tooltip">
            <span>
              <span
                v-if="item.filters&&item.filters.list"
              >{{dataList[item.fieldName] |constantEscape(listTypeInfo[item.filters.list],(item.filters.key||'value'),(item.filters.label||'label'))}}</span>
              <span v-else>{{ item.value }}</span>
              <a-icon
                :type="item.iconClass||'exclamation-circle'"
                :style="item.style||'cursor: pointer;'"
              />
            </span>
            <template #title v-if="item.tooltip">
              <span v-if="typeof item.tooltip === 'string'">{{item.tooltip}}</span>
              <template v-else-if="typeof item.tooltip === 'function'">
                <render-tooltip :createElementFunc="item.tooltip" />
              </template>
            </template>
          </a-tooltip>
          <span v-else>
            <span
              v-if="item.filters&&item.filters.list"
            >{{dataList[item.fieldName] |constantEscape(listTypeInfo[item.filters.list],(item.filters.key||'value'),(item.filters.label||'label'))}}</span>
            <span v-else>{{ item.value }}</span>
          </span>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script>
import { Descriptions, Tooltip, Icon } from 'ant-design-vue'
import RenderTooltip from './renderTooltip.vue'
import { constantEscape } from '../../utils'
export default {
  name: 'TAntdDetail',
  components: {
    RenderTooltip,
    'a-icon': Icon,
    'a-tooltip': Tooltip,
    'a-descriptions': Descriptions,
    'a-descriptions-item': Descriptions.Item
  },
  // 过滤器
  filters: {
    constantEscape
  },
  props: {
    descColumn: {
      type: Number,
      default: 4
    },
    descData: {
      type: Array,
      default: () => ([])
    },
    // 后台数据源
    dataList: {
      type: Object,
      default: () => ({})
    },
    // 需要解析的下拉数据
    listTypeInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang="scss">
.t_antd_detail {
  .ant-descriptions {
    tr:nth-child(2n) {
      background-color: #fff;
    }
    .ant-descriptions-item-label {
      font-weight: bold;
    }
  }
}
</style>

三、参数配置

1、代码示例

<t-antd-detail :descData="descData" />

2、配置参数(Attributes)继承 a-descriptions Attributes

参数说明类型默认值
descData详情页面数据源Array-
----label详情字段说明标题String-
----value详情字段返回值String-
----fieldNamevalue 返回值的字段String-
----slotName插槽(自定义 value)slot-
----span占用的列宽,默认占用 1 列,最多 4 列Number1
----tooltipvalue 值的提示语String/function-
----iconClasstooltip 提示语的 iconString‘exclamation-circle’
----styletooltip 提示语的 icon的样式Object-
----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再次封装基础组件文档


基于ant-design-vue再次封装基础组件文档


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164275.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【广州华锐互动】军用飞机VR实战训练系统

随着科技的飞速发展&#xff0c;虚拟现实(VR)技术为军事训练带来了前所未有的机遇。军用飞机VR实战训练系统&#xff0c;正是在这一背景下应运而生的一种创新的训练方法。该系统利用先进的虚拟现实技术&#xff0c;为飞行员提供真实且逼真的模拟飞行环境&#xff0c;使之能够在…

OpenFeign的简单介绍和功能实操

前言 本文主要做一下OpenFeign的简单介绍和功能实操&#xff0c;实操主要是OpenFeign的超时和重试&#xff0c;在阅读本文章前&#xff0c;请完成《Nacos 注册中心介绍与实操》内的Nacos多模块生产消费者项目 什么是OpenFeign OpenFeign全名Spring Cloud OpenFeign&#xff…

基础课16——客服中心内部使用的智能客服系统

客服中心内部使用的智能客服系统主要包括以下几类&#xff1a; 智能客服机器人(呼入、呼出)&#xff1a;可以自动回答用户的问题&#xff0c;并能根据用户需求进行多轮对话。它采用了先进的自然语言处理技术&#xff0c;能理解并回答用户的问题&#xff0c;并根据需要自主分析…

Redis入门03-多线程和有序集合

目录 Redis的多线程 Redis有序集合的集合操作 Redis的多线程 Redis6.0版本推出了多线程&#xff0c;需要注意的是Redis6.0的多线程是⽤多线程来处理数据的读写和协议解析&#xff0c;但是Redis执⾏命令还是单线程的。官方FAQ表示&#xff0c;因为Redis是基于内存的操作&…

python:pybullet 3D游戏物理引擎 安装过程

先从 Microsoft C Build Tools - Visual Studio 下载 1.73GB 安装 "Microsoft C Build Tools“ 现在&#xff0c;我们将创建一个虚拟环境&#xff0c;并在其中安装 numpy , pybullet cd /python python -m venv myenv cd myenv 使用 Scripts\activate 激活环境&…

【C/C++】积累和派生类的转换

基类与派生类对象之间有赋值兼容关系&#xff0c;由于派生类中包含从基类继承的成员&#xff0c;因此可以将派生类的值赋给基类对象&#xff0c;在用到基类对象的时候可以用其子类对象代替。具体表现在以下几个方面。 一、派生类对象可以向基类对象赋值 可以用子类(即公用派生…

11、电路综合-集总参数电路结构的S参数模型计算与Matlab

11、电路综合-集总参数电路结构的S参数模型 电路综合专栏的大纲如下&#xff1a; 网络综合和简化实频理论学习概述 前面介绍了许多微带线电路综合的实际案例&#xff0c;如&#xff1a; 3、电路综合原理与实践—单双端口理想微带线&#xff08;伪&#xff09;手算S参数与时域…

vue-advanced-chat使用指南

demo地址:https://gitee.com/beekim/vue-advanced-chat vue-advanced-chat的git地址:https://github.com/advanced-chat/vue-advanced-chat 1.搭建demo demo地址克隆后在demo目录安装依赖并启动 启动之后的页面如下: 2.前端代码分析 2.1 重点api分析 current-user-id:…

使用PyQuery库构建有趣的爬虫程序

目录 一、爬虫程序概述 二、PyQuery库介绍 三、使用PyQuery编写爬虫程序 四、注意事项和潜在问题 五、总结 本文将介绍如何使用PyQuery库编写一个有趣且实用的爬虫程序。我们将首先简要介绍爬虫程序的概念和应用&#xff0c;然后详细探讨PyQuery库的特点和优势。接着&…

符号执行初识

一、符号执行概念 符号执行&#xff08;Symbolic Execution&#xff09;是一种程序分析技术&#xff0c;它 可以通过分析程序来得到让特定代码区域执行的输入。 符号执行的 目的 是在给定的时间内&#xff0c; 生成一组输入&#xff0c;并通过这些输入尽可能多的探索执行路径。…

动作捕捉系统进行坐标系转换

动作捕捉系统在机器人等应用中常出现被测物与动捕坐标系不一致的问题。这时就需要进行坐标系的转换。在NOKOV度量动作捕捉系统软件中&#xff0c;可以对被测物的坐标系原点偏移量进行设置&#xff0c;实现被测物坐标系与大地坐标系的重合。 一、坐标系偏移操作 在形影动捕软件…

【数据结构】单向链表的增删查改以及指定pos位置的插入删除

目录 单向链表的概念及结构 尾插 头插 尾删 ​编辑 头删 查找 在pos位置前插 在pos位置后插 删除pos位置 删除pos的后一个位置 总结 代码 单向链表的概念及结构 概念&#xff1a;链表是一种 物理存储结构上非连续 、非顺序的存储结构&#xff0c;数据元素的 逻辑顺序 是…

代码随想录第四十一天 | 动态规划:整数拆分(343,加贪心);不同的二叉搜索树(96)

1、leetcode 343&#xff1a;整数拆分 1.1 leetcode 343&#xff1a;动态规划 第一遍代码没思路 代码随想录思路 看到这道题目&#xff0c;都会想拆成两个呢&#xff0c;还是三个呢&#xff0c;还是四个… 我们来看一下如何使用动规来解决 动规五部曲&#xff0c;分析如下&…

win10 + vs2017 + gdal2.0.3 编译

1. 下载并解压gdal2.0.3 我的放置目录是&#xff1a;D:\Depend_3rd_party\gdal2\gdal-2.0.3&#xff0c;其中gdal-2.0.3是解压得到的文件夹 2. 修改 nmake.opt 文件 用notepad打开nmake.opt文件&#xff0c;修改以下三个部分&#xff1a; &#xff08;1&#xff09;修改C co…

【Java 进阶篇】深入了解 Java ServletContext

Java ServletContext是Java Servlet技术中的一个重要概念&#xff0c;它提供了一种在整个Web应用程序中共享数据和资源的方式。在本文中&#xff0c;我们将深入探讨ServletContext的用途、工作原理和示例用法。无需担心&#xff0c;即使您是一个基础小白&#xff0c;也可以轻松…

C++:string类!

Cstring 是C中的字符串。 字符串对象是一种特殊类型的容器&#xff0c;专门设计来操作的字符序列。 不像传统的c-strings,只是在数组中的一个字符序列&#xff0c;我们称之为字符数组&#xff0c;而C字符串对象属于一个类&#xff0c;这个类有很多内置的特点&#xff0c;在操作…

首届陕西省商贸服务业“金牌店长”大赛落下帷幕

2023年11月1日&#xff0c;首届陕西省商贸服务业金牌店长大赛在秋林大酒店落下帷幕。这是由陕西省商业联合会、陕西省餐饮联合会、陕西省连锁经营协会和西安市连锁经营协会联合举办&#xff0c;旨在挖掘和培养陕西省商贸服务业的优秀店长&#xff0c;提升商贸服务业的整体水平&…

Java多线程----创建线程、线程池ExecutorService、异步编排

文章目录 创建线程的四种方式方式一、继承Thread方式二、自定义实现Runnable接口方式三、Thread FutureTask Callable返回值方式四、线程池ThreadPoolExecutor 线程池的简单介绍通过ThreadPoolExecutor创建自定义线程池ThreadPoolExecutor创建线程池的7大参数线程池处理任务的…

在校园跑腿系统小程序中,如何设计高效的实时通知与消息推送系统?

1. 选择合适的消息推送服务 在校园跑腿系统小程序中&#xff0c;选择一个适合的消息推送服务。例如&#xff0c;使用WebSocket技术、Firebase Cloud Messaging (FCM)、或第三方推送服务如Pusher或OneSignal等。注册并获取相关的API密钥或访问令牌。 2. 集成服务到小程序后端…