Table 表格
用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。
基础表格
基础的表格展示用法。
带斑马纹表格
使用带斑马纹的表格，可以更容易区分出不同行的数据。
不带边框表格
显示溢出工具提示的表格
当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。
固定表头
纵向内容过多时，可选择固定表头。
固定列
横向内容过多时，可选择固定列。
固定列和表头
当您有大量数据块放入表中，您可以同时固定表头和列。
流体高度
当数据量动态变化时，可以为 Table 设置一个最大高度。
多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
固定表头
支持固定群组头
单选
选择单行数据时使用色块表示。
多选
你也可以选择多行。
排序
对表格进行排序，可快速查找或对比数据。
筛选
对表格进行筛选，可快速查找到自己想看的数据。
自定义列模板
自定义列的显示内容，可组合其他组件使用。
自定义表头
表头支持自定义。
展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
树形数据与懒加载
表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计。
合并行或列
多行或多列共用一个数据时，可以合并行或列。
自定义索引
自定义 type=index 列的行号。
表格布局
通过属性 table-layout 可以指定表格中单元格、行和列的布局方式
Table API
Table 属性
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| data | 表数据 | object any[] | [] |
| height | table 的高度 | string / number | — |
| stripe | 是否为斑马纹 table | boolean | false |
| border | 是否带有纵向边框 | boolean | false |
| size | Table 的尺寸 | enum'' | 'large' | 'default' | 'small' | — |
| fit | 列的宽度是否自撑开 | boolean | true |
| text-size | 文字的大小 lg， md，sm，xs | string | sm |
| empty-text | 无数据显示文字 | string | 暂无数据 |
Table 插槽
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Table-column |
Table-column API
Table-column 属性
| 属性名 | 说明 | Type | 默认值 |
|---|---|---|---|
| type | 对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮 | enum 'default' | 'selection' | 'index' | 'expand' | default |
| index | 如果设置了 type=index，可以通过传递 index 属性来自定义索引 | number / Function (index: number) => number | — |
| label | 显示的标题 | string | — |
| prop | 字段名称 对应列内容的字段名， 也可以使用 property属性 | string | — |
| width | 对应列的宽度 | string / number | '' |
| fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | enum 'left' | 'right' / boolean | false |
| sortable | 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean / string | false |
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | true |
| formatter | 用来格式化内容 | function (row: any, column: any, cellValue: any, index: number) => VNode | string | — |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | boolean / object | undefined |
| align | 对齐方式 | enum 'left' | 'center' | 'right' | left |
| header-align | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | enum 'left' | 'center' | 'right' | left |
Table-column 插槽
| 插槽名 | 说明 | 类型 |
|---|---|---|
| default | 自定义列的内容 | object { row: any, column: any, $index: number } |
| header | 自定义表头的内容， | object { column: any, $index: number } |
| filter-icon | 自定义 filter 图标 | object { filterOpened: boolean } |