§ Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

基础的表格展示用法。
显示代码

带斑马纹表格

使用带斑马纹的表格,可以更容易区分出不同行的数据。
显示代码

带边框表格

显示代码

带状态表格

可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。
显示代码

固定表头

纵向内容过多时,可选择固定表头。
显示代码

固定列

横向内容过多时,可选择固定列。
显示代码

固定列和表头

横纵内容过多时,可选择固定列和表头。
显示代码

流体高度

当数据量动态变化时,可以为 Table 设置一个最大高度。
显示代码

多级表头

数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系。
显示代码

单选

选择单行数据时使用色块表示。
显示代码

多选

选择多行数据时使用 Checkbox。
显示代码

排序

对表格进行排序,可快速查找或对比数据。
显示代码

筛选

对表格进行筛选,可快速查找到自己想看的数据。
显示代码

自定义列模板

自定义列的显示内容,可组合其他组件使用。
显示代码

展开行

当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
显示代码

树形数据与懒加载

显示代码

自定义表头

表头支持自定义。
显示代码

表尾合计行

若表格展示的是各类数字,可以在表尾显示各列的合计。
显示代码

合并行或列

多行或多列共用一个数据时,可以合并行或列。
显示代码

自定义索引

自定义 type=index 列的行号。
显示代码

Table Attributes

Table Events

Table Methods

Table Slot

Table-column Attributes

Table-column Scoped Slot

最后更新于: 4/15/2022, 2:41:22 PM