# Detail 详情

展示组件model对象的详情

## 基础用法

展示配置列表数据源的某一条数据的详情，通常配合**Table**、**Form**组件使用

::: snippet 使用`list`属性设置数据源，其中**span**设置占位，`value`为list中key构成的**Object**类型对象

```html
<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>
```

:::

## 分组展示

将需要展示的数据分组显示

::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组，group可以是一个Object，用于快速配置一些预置的效果

```html
<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>
```

:::

## 自定义内容

基本的数据展示并不能满足复杂页面展示需求，因此可以通过**列表项具名插槽**的方式替换对应的展示位

::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`item-key`，返回值有model、value及对应配置项所有参数

```html
<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>
```

:::

## 自定义表头

在特定的业务场景下，分组标题需要展示图标或旁边需要放置按钮，此时便可以使用**表头具名插槽**替换表头内容

> 注意：自定义表头只支持Object类型的group配置

::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表头具名插槽格式为`group-key`，返回值包括key及group配置内容

```html
<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 | <a href="https://element.eleme.cn/#/zh-CN/component/form#form-attributes" target="_blank">el-form组件参数</a> | 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 | -