文章目录
- 更新内容
- DetailsModuleAPI汇总
- 属性
- 自定义对象
- config.list(array<object> 类型)
- 使用
- span属性（24栅格系统）
更新内容
- 新增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的参数
<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>
