adminPage-vue3依赖 v1.2.0新增组件 DetailsModule说明文档
引入
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>