文章目录
- 更新内容
- DetailsModuleAPI汇总
更新内容
- 新增span与labelSpan属性，当使用span属性时将不适用默认的布局，如果24栅格系统进行重新布局
DetailsModuleAPI汇总
属性
| 属性名 | 说明 | 类型 | 默认值 | 版本号 |
|---|---|---|---|---|
| span | 每个单元格所占24栅格中的大小，声明后将使用24栅格布局 | - | 1.2.1 | |
| labelSpan | 每个label格所占24栅格中的大小 | 3 | 1.2.1 |
自定义对象
config.list(array 类型)
| 属性名 | 说明 | 类型 | 默认值 | 版本号 |
|---|---|---|---|---|
| span | 每个单元格所占24栅格中的大小，声明后将使用24栅格布局 | - | 1.2.1 | |
| labelSpan | 每个label格所占24栅格中的大小 | 3 | 1.2.1 |
使用
span属性（24栅格系统）
当声明span时，将会使用24栅格布局，如果labelSpan被声明，则label位置将使用labelSpan的参数
javascript
<template>
<div style="margin: 50px 10%">
<DetailsModule
:config="detailConfig2"
:data="detailData"
nullText="暂无数据"
:span="4"
:labelSpan="4"
>
</DetailsModule>
<DetailsModule
:config="detailConfig2"
:data="detailData"
nullText="暂无数据"
>
</DetailsModule>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { DetailsModule } from 'adminpage-vue3'
const detailData = ref({
data1: 'data1',
data2: '',
data3: '',
data4: 'data4',
data5: 'data5',
})
const detailConfig2 = [
{
title: '模块一',
list: [
{
label: '数据一',
key: 'data1',
span: '8',
labelSpan: '4',
},
{
label: '数据二',
key: 'data2',
span: '4',
labelSpan: '8',
},
{
label: '数据三',
key: 'data3',
nullText: '尚未录入数据',
},
{
label: '数据四',
key: 'data4',
},
{
label: '数据五',
key: 'data5',
},
],
},
]
</script>