# Table 表格 0.1.39
用于展示多条结构类似的数据， 可对数据进行排序等操作。
## 基础用法
通过`data`设置表格数据。
```html
```
```ts
const dataList = reactive([
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业'
}
])
```
## 固定列
通过`fixed`设置表格列是否固定展示，默认`false`。
:::warning 提示
目前仅支持固定在左侧，且固定列组件的排列顺序要和实际想要展示的顺序相同。
:::
```html
```
## 斑马纹
通过`stripe`设置表格是否展示斑马纹，默认`true`。
```html
```
## 边框
通过`border`设置表格是否展示边框，默认`true`。
```html
```
## 表格高度
通过`height`设置表格高度，默认为`80vh`。
```html
```
## 排序事件
当存在列参与排序时，点击会触发`sort-method`排序事件。
```html
```
```ts
function handleSort(e) {
console.log('这里是排序事件')
}
```
## 自定义列模板
自定义列的显示内容，可组合其他组件使用。
通过 `Scoped slot` 可以获取到 `row` 的数据，用法参考 demo。
```html
{{ row.grade }}
同比{{ row.compare }}
```
```ts
import { ref } from 'vue'
const dataList = ref[]>([
{
name: '张飞',
school: '武汉市阳逻杀猪学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 56,
compare: '10%',
hobby: '燕人张飞在此！'
},
{
name: '关羽',
school: '武汉市阳逻绿豆学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 66,
compare: '11%',
hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
},
{
name: '刘备',
school: '武汉市阳逻编织学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 45,
compare: '1%',
hobby: '我得空明，如鱼得水也'
},
{
name: '赵云',
school: '武汉市阳逻妇幼保健学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 69,
compare: '14%',
hobby: '子龙，子龙，世无双'
},
{
name: '孔明',
school: '武汉市阳逻卧龙学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 88,
compare: '21%',
hobby: '兴汉讨贼，克复中原'
},
{
name: '姜维',
school: '武汉市阳逻停水停电技术学院',
major: '计算机科学与技术专业',
gender: '男',
graduation: '2022年1月12日',
grade: 87,
compare: '32%',
hobby: '我计不成，乃天命也！'
}
])
/**
* 排序
* @param e
*/
function handleSort(e) {
dataList.value = dataList.value.reverse()
}
```
```css
.custom-class {
height: 80rpx;
width: 220rpx;
display: flex;
flex-direction: col;
align-items: center;
}
```
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ----------- | -------------- | ----------------------- | ------------------- | --------- | --------- |
| data | 显示的数据 | Array | - | - | 0.0.39 |
| border | 是否带有边框 | boolean | - | true | 0.0.39 |
| stripe | 是否为斑马纹表 | boolean | - | true | 0.0.39 |
| height | Table 的高度，默认为`80vh` | string | - | `80vh` | 0.0.39 |
| rowHeight | 行高 | `number / string` | - | 50 | 0.0.39 |
| showHeader | 是否显示表头 | boolean | - | true | 0.0.39 |
| ellipsis | 是否超出2行隐藏 | boolean | - | true | 0.0.39 |
## TableColumn Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| --------- | ----------- | ---------------------- | ------------------------------------------------ | -------- | --------- |
| prop | 字段名称,对应列内容的字段名| string | - | - | 0.0.39 |
| label | 显示的标题 | string | - | - | 0.0.39 |
| width | 对应列的宽度，单位为px | number / string | - | 100 | 0.0.39 |
| sortable | 是否开启列排序 | boolean | - | false | 0.0.39 |
| fixed | 是否固定本列 | boolean | - | false | 0.0.39 |
| align | 列的对齐方式 | AlignType | left, center, right | left | 0.0.39 |