# Detail 详情

> 将Form组件的值展示位详情

## 基础用法

配置项list将无视配置的type，统一渲染为label

:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件

```html
<template>
  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
</template>

<script>
export default {
  data() {
    return {
      detailList: [
        { type: 'el-input', key: 'name', label: '名称' },
        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
      ],
      detailModel: {
        name: '老A',
        address: 'Any where',
        postcode: 123456,
        number: 'N栋N-N'
      }
    }
  },
}
</script>
```

:::


使用`list`属性设置数据源

```js
export default {
    data() {
        const d = '!&(*&(*';
        console.log('123');
        return {
            a: 123,
            b: '456',
            c: d,
        }
    }
}
```

---

1231

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value / v-model |	绑定值 | Object | - | -
list | 表单项配置列表 | Array | - | []

## List 表单项配置列表

参数|说明|类型|可选值|默认值
-|-|-|-|-
key | 参数名 | String | - | -
label | 参数标签 | String | - | -