## 基础表格
在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。
在下例中，我们还用了`width`属性来定义列宽：
```html
```
## 带斑马纹表格
`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
```html
```
## 带边框表格
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
```html
```
## 带状态表格
可以为行添加自定义背景色，表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`，则为该行添加`custom-background-colors`数组中对应的背景色。
```html
```
## 固定表头
只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格：
```html
```
## 固定列
除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用：
```html
```
## 固定列和表头
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例：
```html
```
## 单选
更方便的是，Table 组件默认提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`即可。
之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。
在下例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。
如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
{{ singleSelection }}
```html
```
## 多选
除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`的事件中，我们提供的参数从对象变成了对象数组。
此外，需要提供一个栏目来显示多选框，手动添加一列，设`type`属性为`selection`即可。
在下例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。
而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。
{{ row.date }}
{{ multipleSelection }}
```html
{{ row.date }}
```
## 排序
Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。
在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
```html
```
## Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | | |
| height | table 的高度，默认高度为空，即自动高度 | string | | '' |
| stripe | 是否为斑马纹 table | boolean | | false |
| border | 是否带有纵向边框 | boolean | | false |
| selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
| allow-no-selection | 单选模式是否允许选项为空 | boolean | | false |
| fixed-column-count | 固定列的个数 | number | | 0 |
## Table Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| selectionchange | 当选择项发生变化时会触发该事件 | selected |
| cellmouseenter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
| cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
## Table-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 显示的标题 | string | | '' |
| property | 对应列内容的字段名 | string | | '' |
| width | 对应列的宽度 | string | | |
| sortable | 对应列是否可以排序 | boolean | | false |
| type | 对应列的类型。如果设置了 `selection` 则显示多选按钮，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | 'selection', 'index' | 0 |
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | |
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，通过 _self 获取当前上下文。此时不需要配置 property 属性 | | |