首页 前端知识 vue3 element-plus el-descriptions 详情组件二次封装(vue3项目)

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

2024-06-09 09:06:50 前端知识 前端哥 11 289 我要收藏

最终效果

在这里插入图片描述

一、需求

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

二、源码

<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再次封装基础组件文档

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11666.html
评论
发布的文章

【web前端】CSS浮动

2024-06-18 00:06:02

HTML CSS做的商城页面

2024-06-18 00:06:23

去空行小工具Html Javascript

2024-06-18 00:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!