detail.md
3.91 KB
Detail 详情
展示组件model对象的详情
491c5ab115afb93939eb8ab69bc74016ba938791/examples/views/docs/component/detail.md#">基础用法
展示配置列表数据源的某一条数据的详情，通常配合Table、Form组件使用
::: snippet 使用list属性设置数据源，其中span设置占位，value为list中key构成的Object类型对象
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
</template>
<script>
export default {
data() {
return {
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'political', label: '政治面貌' },
{ key: 'troop', label: '部队番号', span: 24 },
{ key: 'position', label: '职务' },
{ key: 'partner', label: '搭档' },
],
model: {
name: '李云龙',
age: 18,
political: '中共党员',
troop: '独立团',
position: '团长',
partner: '赵刚',
}
}
},
}
</script>
:::
491c5ab115afb93939eb8ab69bc74016ba938791/examples/views/docs/component/detail.md#">分组展示
将需要展示的数据分组显示
::: snippet 在list配置项中使用group配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为基本信息分组
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
</template>
<script>
export default {
data() {
return {
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'political', label: '政治面貌', group: '工作信息' },
{ key: 'troop', label: '部队番号', group: '工作信息' },
{ key: 'position', label: '职务', group: '工作信息' },
{ key: 'partner', label: '搭档', group: '工作信息' },
],
model: {
name: '李云龙',
age: 18,
political: '中共党员',
troop: '独立团',
position: '团长',
partner: '赵刚',
}
}
},
}
</script>
:::
491c5ab115afb93939eb8ab69bc74016ba938791/examples/views/docs/component/detail.md#">自定义内容
基本的数据展示并不能满足复杂页面展示需求，因此可以通过具名插槽的方式替换对应的展示位
::: snippet 在list配置项中使用group配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为基本信息分组
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;">
<!-- <template #item-position="{ value }">
<el-tag type="primary" size="small">{{ value }}</el-tag>
</template> -->
<el-tag slot="item-position" slot-scope="{ value }" type="primary" size="small">{{ value }}</el-tag>
<template #item-partner="{ model }">
<el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag>
</template>
</eagle-detail>
</template>
<script>
export default {
data() {
return {
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'political', label: '政治面貌', group: '工作信息' },
{ key: 'troop', label: '部队番号', group: '工作信息' },
{ key: 'position', label: '职务', group: '工作信息' },
{ key: 'partner', label: '搭档', group: '工作信息' },
],
model: {
name: '李云龙',
age: 18,
political: '中共党员',
troop: '独立团',
position: '团长',
partner: '赵刚',
}
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Object | - | {} list | 表单项配置列表 | Array | - | [] formProps | el-form组件参数 | Object | - | {} span | 数据项占位 | Number | 0 - 24 | 8
List 表单项配置列表
参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | - span | 数据项占位 | Number | 0 - 24 | -