---
order: 2
group:
  title: 列表
  order: 50
---

## 包含详情的列表

包含详情的列表展示，点击展开详情

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const data = [
  {
    id: 1,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:14',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
    eventPicUrl:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/ebff3101-5c11-45e7-962f-dd02d7066534.jpeg',
  },
  {
    id: 2,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:14',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 3,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:12',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 4,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 5,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 6,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
];

const props = {
  data,
  limit: 4,
  marginBottom: 1,
  size: {
    width: '100%',
    height: '100%',
  },
};

export default () => (
  <div style={{ width: 440, height: 300, background: `#181b1c` }}>
    <Charts.DetailList {...props} />
  </div>
);
```

奇偶行

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const data = [
  {
    id: 1,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:14',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
    eventPicUrl:
      'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/ebff3101-5c11-45e7-962f-dd02d7066534.jpeg',
  },
  {
    id: 2,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:14',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 3,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:12',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 4,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 5,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
  {
    id: 6,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:05',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
];

const props = {
  data,
  limit: 4,
  marginBottom: 1,
  oddEvenOpen: true,
  firstRowColor: 'green',
  background: '#383831',
  evenBackground: 'rgba(0, 0, 0, .7)',
  oddBackground: 'rgba(0, 0, 0, .4)',
  size: {
    width: '100%',
    height: '100%',
  },
};

export default () => (
  <div style={{ width: 440, height: 300, background: `#181b1c` }}>
    <Charts.DetailList {...props} />
  </div>
);
```

## API

| 参数           | 说明           | 类型    | 默认值               |
| -------------- | -------------- | ------- | -------------------- |
| size           | 容器的宽高     | object  |
| limit          | 显示的数据条数 | number  | 4                    |
| data           | 数据源         | array   |
| marginBottom   | 底部间距       | number  | 0                    |
| firstRowColor  | 首行背景色     | string  | rgba(45,185,255,0.3) |
| oddEvenOpen    | 奇偶行         | boolean | false                |
| evenBackground | 偶数行背景颜色 | string  | rgba(0, 0, 0, .7)    |
| oddBackground  | 奇数行背景颜色 | string  | rgba(0, 0, 0, .4)    |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |

## 数据源格式

```js
[
  {
    id: 1,
    identityName: '访客',
    inOrOut: '进入',
    position: '生活馆门禁',
    sex: 0,
    time: '2020-04-03 18:35:14',
    trafficName: '楼*',
    trafficTypeDesc: 'APP',
  },
];
```