# Table 表格

## 引入

```
import {Table, TableColumn} from 'wwz-ui'
```

## 预览

### 普通版

由于属性较多，请移步在下方的在线链接中体验效果。

### 固定表头

固定表头用到了 `getBoundClientRect` 这个方法，而 codeSandBox 目前还不支持，所以你可能会看到第一行不展示。

## API

| 参数             | 说明                                                                                   | 类型      | 默认值     |
| -------------- | ------------------------------------------------------------------------------------ | ------- | ------- |
| dataSource     | 要展示在表格的数据，每一项的 key 值需要和 `TableColumn` 的 name 相对应                                     | Array   | -       |
| bordered       | 是否需要边框                                                                               | Boolean | false   |
| striped        | 是否开启斑马纹                                                                              | Boolean | true    |
| size           | 控制表格的大小，可以传 big 、 middle 、small                                                      | Boolean | Big     |
| sortDirections | 可以控制每一项的排序规则，可选 asc，desc，true                                                        | String  | Boolean |
| height         | 接收 String 类型的数字，指定表格的高度，传此项开启固定表头的功能。如指定此项，请为 dataSource 数据的每一个对象都添加一个 width 属性来控制宽度 | String  | -       |
| loading        | 表示表格数据正在加载                                                                           | Boolean | false   |
| selectedItems  | 请传一个空的数组，如果传此值，将展示最左侧的 `checkbox` ，选中的值会被加入进入                                        | Array   | -       |

:::warning 使用 `selectedItems` 这个属性的时候也要加 `.sync` 这个修饰符，不然点击没有效果。 :::

### sortDirections 使用举例

```js
sortDirections: {
    name: "asc",
    address: true
}
```

### 关于 `TableColumn`

`Table` 中的每一项都要这么传

```vue
<template slot="z-column">
    <z-table-column name="姓名" field="name">
    </z-table-column>
</template>
```

slot 的名字一定要是 z-column，内部 `z-table-column` 的姓名将按顺序展示在表格的头部，field 的内容和 dataSource 数据中的每一项相对应。

如果你想传 html 元素进去，也是可以的，请按照下面的示例。

```
<template slot="z-column">
    <z-table-column name="姓名" field="id"> 
        <template slot-scope="source">
         <button @click="edit(source)">编辑</button>
        </template>
    </z-table-column>
</template>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wwz.gitbook.io/zui/components/table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.