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	无
----fieldName	value 返回值的字段	String	无
----slotName	插槽（自定义 value）	slot	无
----span	占用的列宽，默认占用 1 列，最多 4 列	Number	1
----tooltip	value 值的提示语	String/function	无
----iconSize	tooltip 提示语的 icon 大小	String/Number	继承字体大小
----iconColor	tooltip 提示语的 icon 颜色	String	继承颜色
----filters	字典类型（即后台返回的是数字类型）过滤转成中文	Object	无
-------list	字典 list 定义的数据名即 listTypeInfo 里面对应的值	String	无
-------key	下拉数据源的 key 字段	String	‘value’
-------label	下拉数据源的 label 字段	String	‘label’
descColumn	布局一行显示几列（默认：一行显示 4 列）	Number	4
dataList	开启 filters 时详情接口返回的数据	Object	{}
listTypeInfo	开启 filters 时下拉数据源	Object	{}

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

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

---

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