当前位置：首页 > article >正文

adminPage-vue3依赖 v1.2.0新增组件 DetailsModule说明文档

article 2024/10/21 11:12:20

adminPage-vue3依赖 v1.2.0新增组件 DetailsModule说明文档

引入
思路介绍
DetailsModuleAPI汇总
- 属性
- 插槽
- 自定义对象
- - config(array<object\>/object 类型)
  - - config.list(array<object\> 类型)
使用
- 基础使用范例
- config-title
- config-moduleKey
- config-list
- - config-list-slotName
  - config-list-column
- nullText

引入

import { DetailsModule} from 'adminpage-vue3'

思路介绍

本组件主要是通过配置项显示详情表单，类似于elementPlus的ElDescriptions 描述列表但是本组件的label,value是固定宽度的，非动态变化

DetailsModuleAPI汇总

属性

属性名	说明	类型	默认值	版本号
config	显示详情的配置项，当配置是对象时，内部将自动映射为[ Object ]	Array/Object	[]	1.2.0
data	显示数据的对象	Object	{}	1.2.0
nullText	数据为空的时候显示的内容	String	’‘	1.2.0

插槽

插槽名	说明	版本号
config里配置的插槽	config里配置的插槽	1.2.0

自定义对象

config(array<object>/object 类型)

属性名	说明	类型	默认值	版本号
title	模块标题	String	-/-	1.2.0
nullText	数据为空的时候显示的内容	String	’‘	1.2.0
moduleKey	模块字段所在对象key值	String	-/-	1.2.0
list	配置具体显示详情字段列表,配置详见 config.list	Array	-/-	1.2.0

config.list(array<object> 类型)

属性名	说明	类型	默认值	版本号
key	显示字段的key值	String	-/-	1.2.0
slotName	插槽名	String	-/-	1.2.0
column	所占行数	Int	1	1.2.0
nullText	数据为空的时候显示的内容	String	’‘	1.2.0

使用

基础使用范例

在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule
      :config="detailConfig"
      :data="detailData"
      nullText="暂无数据"
    >
      <template #showButton>
        <el-button type="primary" link> 查看 </el-button>
      </template>
    </DetailsModule>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  data1: 'data1',
  data2: '',
  data3: '',
  data4: 'data4',
  data5: 'data5',
  dataObj: {
    data1: 'dataObj.data1',
    data2: 'dataObj.data2',
    data3: 'dataObj.data3',
    data4: 'dataObj.data4',
    data5: 'dataObj.data5',
    data6: 'dataObj.data6',
  },
  dataObj2: {
    data1: 'dataObj2.data1',
    data2: 'dataObj2.data2',
    data3: 'dataObj2.data3',
    data4: 'dataObj2.data4',
  },
})
const detailConfig = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
        nullText: '尚未录入数据',
      },
      {
        label: '数据四',
        key: 'data4',
      },
      {
        label: '数据五',
        key: 'data5',
        column: '5',
      },
      {
        label: '插槽',
        slotName: 'showButton',
      },
    ],
  },
  {
    title: '模块二',
    list: [
      {
        label: '数据对象一',
        key: 'dataObj.data1',
      },
      {
        label: '数据对象二',
        key: 'dataObj.data2',
      },
      {
        label: '数据对象三',
        key: 'dataObj.data3',
      },
      {
        label: '数据对象四',
        key: 'dataObj.data4',
      },
      {
        label: '数据对象五',
        key: 'dataObj.data5',
      },
      {
        label: '数据对象六',
        key: 'dataObj.data6',
      },
      {
        nullText: '',
      },
      {},
    ],
  },
  {
    moduleKey: 'dataObj2',
    list: [
      {
        label: '数据对象一',
        key: 'data1',
      },
      {
        label: '数据对象二',
        key: 'data2',
      },
      {
        label: '数据对象三',
        key: 'data3',
      },
      {
        label: '数据对象四',
        key: 'data4',
      },
    ],
  },
]
</script>

config-title

模块标题，配置后将作为标题在左上角进行显示，如果没有配置将会隐藏
在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule :config="detailConfig" :data="detailData" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  data1: '数据1',
  data2: '数据2',
  data3: '数据3',
  data4: '数据4',
})
const detailConfig = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
    ],
  },
  {
    title: '模块二',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
    ],
  },
  {
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
    ],
  },
]
</script>

config-moduleKey

在一些情景下，详情数据的每个模块分别从不同的对象集合内取值，可以通过moduleKey配置模块公共key值

在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule :config="detailConfig" :data="detailData" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  dataObj1: {
    data1: '集合1数据1',
    data2: '集合1数据2',
    data3: '集合1数据3',
    data4: '集合1数据4',
  },
  dataObj2: {
    data1: '集合2数据1',
    data2: '集合2数据2',
    data3: '集合2数据3',
    data4: '集合2数据4',
  },
})
const detailConfig = [
  {
    title: '模块一',
    moduleKey: 'dataObj1',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
    ],
  },
  {
    title: '模块二',
    list: [
      {
        label: '数据一',
        key: 'dataObj2.data1',
      },
      {
        label: '数据二',
        key: 'dataObj2.data2',
      },
      {
        label: '数据三',
        key: 'dataObj2.data3',
      },
      {
        label: '数据四',
        key: 'dataObj2.data4',
      },
    ],
  },
]
</script>

config-list

config-list-slotName

当详情内并非显示数据时，可配置slotName来使用插槽，插槽名即为slotName配置的名称
在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule :config="detailConfig" :data="detailData">
      <template #showButton>
        <el-button type="primary" link> 查看 </el-button>
      </template>
    </DetailsModule>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  data1: '数据1',
  data2: '数据2',
  data3: '数据3',
  data4: '数据4',
})
const detailConfig = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        slotName: 'showButton',
      },
    ],
  },
]
</script>

config-list-column

当需要跨多行显示内容槽时，可通过column配置
在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule :config="detailConfig" :data="detailData" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  data1: '数据1',
  data2: '数据2',
  data3: '数据3',
  data4: '数据4',
  data5: '数据5是一个超长文本',
})
const detailConfig = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
      {
        label: '数据四',
        key: 'data5',
        column: 5,
      },
      {},
    ],
  },
]
</script>

nullText

nullText分别在组件级别、模块级别、字段级别可配置，优先级为越细化越优先，即字段级别>模块级别>组件级别

在这里插入图片描述

<template>
  <div style="margin: 10% 20%">
    <DetailsModule
      :config="detailConfig"
      :data="detailData"
      nullText="组件级占位"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const detailData = ref({
  data1: '数据1',
  data2: '',
})
const detailConfig = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
      },
      {
        label: '数据四',
        key: 'data4',
      },
    ],
  },
  {
    title: '模块二',
    nullText: '模块级占位',
    list: [
      {
        label: '数据一',
        key: 'data1',
      },
      {
        label: '数据二',
        key: 'data2',
      },
      {
        label: '数据三',
        key: 'data3',
        nullText: '字段级占位',
      },
      {
        label: '数据四',
        key: 'data4',
        nullText: '',
      },
    ],
  },
]
</script>