# Detail 详情

展示组件model对象的详情

## 基础用法

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

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

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

:::

## 分组展示

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

::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组

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

:::

## 自定义内容

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

::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组

```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> -->
    <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组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
span | 数据项占位 | Number | 0 - 24 | 8

## List 表单项配置列表

参数|说明|类型|可选值|默认值
-|-|-|-|-
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
span | 数据项占位 | Number | 0 - 24 | -