Detail 详情
展示组件model对象的详情
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/detail.md#">基础用法
展示配置列表数据源的某一条数据的详情，通常配合Table、Form组件使用
::: snippet 使用list属性设置数据源，其中span设置占位，value为list中key构成的Object类型对象
<template>
<eagle-detail v-model="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>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/detail.md#">分组展示
将需要展示的数据分组显示
::: snippet 在list配置项中使用group配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为基本信息分组，group可以是一个Object，用于快速配置一些预置的效果
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail>
</template>
<script>
export default {
data() {
const partnerGroup = { key: 'partner', icon: 'star-on', label: '附加信息' }
return {
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'political', label: '政治面貌', group: '工作信息' },
{ key: 'troop', label: '部队番号', group: '工作信息' },
{ key: 'position', label: '职务', group: '工作信息' },
{ key: 'partner', label: '搭档', group: partnerGroup },
],
model: {
name: '李云龙',
age: 18,
political: '中共党员',
troop: '独立团',
position: '团长',
partner: '赵刚',
}
}
},
}
</script>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/detail.md#">自定义内容
基本的数据展示并不能满足复杂页面展示需求，因此可以通过列表项具名插槽的方式替换对应的展示位
::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为item-key，返回值有model、value及对应配置项所有参数
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;">
<template #item-position="{ value }">
<el-tag type="primary" size="small">{{ value }}</el-tag>
</template>
<template #item-partner="{ model }">
<el-tag type="danger" size="small">{{ model.partner }}</el-tag>
</template>
<template #item-picture="{ value }">
<img :src="value" height="100" />
</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: '工作信息' },
{ key: 'picture', label: '图片', group: '证明材料' },
],
model: {
name: '李云龙',
age: 18,
political: '中共党员',
troop: '独立团',
position: '团长',
partner: '赵刚',
picture: '/img/logo.svg',
}
}
},
}
</script>
:::
58dc1f766b322e4fb613a73bb5457c60d2252618/examples/views/docs/component/detail.md#">自定义表头
在特定的业务场景下，分组标题需要展示图标或旁边需要放置按钮，此时便可以使用表头具名插槽替换表头内容
注意：自定义表头只支持Object类型的group配置
::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表头具名插槽格式为group-key，返回值包括key及group配置内容
<template>
<eagle-detail :value="model" :list="list" style="width: 800px;">
<template #group-work="{ label }">
<div style="padding: 15px 5px;border-bottom: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
<span>{{ label }}
<el-tooltip class="item" effect="light" content="保密条例" placement="top">
<template #content><span style="color: red;padding-right: 5px;">*</span>保密条例</template>
<i class="el-icon-info"></i>
</el-tooltip>
</span>
<el-button size="mini" type="primary">下载</el-button>
</div>
</template>
</eagle-detail>
</template>
<script>
export default {
data() {
const groupWork = { key: 'work', label: '工作信息' };
return {
list: [
{ key: 'name', label: '姓名' },
{ key: 'age', label: '年龄' },
{ key: 'political', label: '政治面貌', group: groupWork },
{ key: 'troop', label: '部队番号', group: groupWork },
{ key: 'position', label: '职务', group: groupWork },
{ key: 'partner', label: '搭档', group: groupWork },
],
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 formatter | 格式化 | Function | - | - agentKey | 代理key，用另一个key的值表示当前内容 | String | - | -
List 表单项配置列表
参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | - span | 数据项占位 | Number | 0 - 24 | - group | 数据项分组，为Object类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | - span | 数据项占位 | Number | 0 - 24 | -