# Data Table 数据表格

[toc]

此组件为小程序数据表格组件，提供基础的数据表格支持。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-table": "../dist/table/index"
  }
}

```

## 用法

首先定义数据表格需要的数据，其中`columns`中的`key`和`records`中的键名是一一对应的：

```js
Page({
  data: {
    columns: [
      {
        key: "name",
        header: "姓名",
        width: "40"
      },
      {
        key: "phone",
        header: "电话",
        width: "80"
      },
      {
        key: "area",
        header: "地区",
        width: "40"
      },
      {
        key: "idcard",
        header: "身份证",
        width: "150"
      }
    ],
    records: [
      {
        name: "李大",
        phone: "14741148784",
        area: "安徽",
        idcard: "123456789123456789"
      },
      // 更多数据
    ]
  }
})
```

### 基础用法

```html
<tea-data-table
  columns="{{ columns }}"
  records="{{ records }}"
></tea-data-table>
```

### 带边框模式

```html
<tea-data-table
  columns="{{ columns }}"
  records="{{ records }}"
  bordered
></tea-data-table>
```

### 指定宽度

```html
<tea-data-table
  columns="{{ columns }}"
  records="{{ records }}"
  width="500"
></tea-data-table>
```

### 指定高度

```html
<tea-data-table
  columns="{{ columns }}"
  records="{{ records }}"
  height="200"
></tea-data-table>
```

### 固定头部

```html
<tea-data-table
  columns="{{ columns }}"
  records="{{ records }}"
  height="200"
  header-fixed
></tea-data-table>
```

### 自定义body内容

```html
<tea-data-table
  columns="{{ columns }}"
>
  <view class="custom-table__body" slot="body">
    人面不知何处去，桃花依旧笑春风
  </view>
</tea-data-table>
```

### 自定义内容

首先，若您想自定义头部内容，则需要保证两个条件：

-   必须指定`key`值；
-   `header`值必须缺省。

同样的，让您想自定义body中的内容，则您想要自定义的键值需要缺省，例子如下：

```js
Page({
  data: {
    // 自定义表头，header 必须缺省，key必须指定
    inCompleteColumns: [
			{
				key: 'name',
			},
			{
				key: 'phone',
			},
			{
				key: 'area',
			},
			{
				key: 'idcard',
			},
    ],
    // 此处的body自定义name值，则name值缺省
		inCompleteRecords: [
			{
				phone: '14741148784',
				area: '安徽',
				idcard: '123456789123456789',
			},
			{
				phone: '14741148784',
				area: '安徽',
				idcard: '123456789123456789',
			},
			{
				phone: '14741148784',
				area: '安徽',
				idcard: '123456789123456789',
			},
			{
				phone: '14741148784',
				area: '安徽',
				idcard: '123456789123456789',
			},
  }
})
```

```html
<tea-data-table
  columns="{{ inCompleteColumns }}"
  records="{{ inCompleteRecords }}"
>
  <block
    wx:for="{{inCompleteColumns}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="key"
  >
    <!-- header 的 slot -->
    <view slot="header-{{ item.key }}">
      表头{{index}}
      <tea-icon name="star" size="12"></tea-icon>
    </view>
    <!-- body 的 slot -->
    <view slot="body-{{index}}-name">
      杨大
      <tea-icon name="check" size="12"></tea-icon>
    </view>
  </block>
</tea-data-table>
```

-   请注意这里`slot`的命名，表头的`slot`格式为`header-{item.key}`,表体的`slot`格式为`body-{index}-{child.key}`。

## Props

| 参数          | 描述        | 类型              | 默认值     |
| ----------- | --------- | --------------- | ------- |
| bordered    | 数据表格是否带边框 | `Boolean`       | `false` |
| columns     | 数据表格的列配置  | `Array`         | -       |
| records     | 数据表格的数据   | `Array`         | -       |
| width       | 数据表格的宽度   | `Number,String` | -       |
| height      | 数据表格的高度   | `Number,String` | -       |
| headerFixed | 是否固定头部    | `Boolean`       | `false` |

## Columns 属性

| 参数     | 描述          | 类型       | 默认值 |
| ------ | ----------- | -------- | --- |
| key    | 表头单元格的唯一标识符 | `String` | -   |
| header | 表头单元格的内容    | `String` | -   |
| width  | 单元格的宽度      | `Number` | -   |

## Slots

| 名称                       | 描述           |
| ------------------------ | ------------ |
| body                     | 自定义表体内容      |
| header-{item.key}        | 自定义头部单元格内容   |
| body-{index}-{child.key} | 自定义表格主体单元格内容 |

## 外部样式类

| 类名                 | 描述           |
| ------------------ | ------------ |
| `ext-class`        | 自定义数据表格样式    |
| `ext-header-class` | 自定义数据表格的表头样式 |
| `ext-body-class`   | 自定义数据表格行样式   |

## CSS变量属性表

| 变量名                                | 默认值                    | 描述  |
| ---------------------------------- | ---------------------- | --- |
| data-table-border-color            | #DDD                   | -   |
| data-table-text-color              | @text-color            | -   |
| data-table-background-color        | @background-base-color | -   |
| data-table-header-background-color | #f8f8f8                | -   |