showNav: true

Table

@rrc-materials/table for rrc

Table 表格

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

:::tip

注意： Element-UI 的属性和方法都适用。Element-UI的Table Attributes属性都通过rc-table的attr属性传入，Table Events都通过on传入。el-table-column的属性都通过columns传入。如果要调用Element-UI的API，如下使用this.$refs.table.$table()。 :::

基础表格

给rc-table传入columns，定义列的渲染，columns是一个数组，每一项就是定义的一列，该列的属性同el-table-column的props。直接给rc-table绑定load事件，让rc-table自己自动取数据

分页表格

给rc-table的page传入分页配置，就可以启用分页功能了，兼容el-pagination的所有功能，另外安装的时候也可以传入$RC_TABLE全局配置。分页的具体的请查看ElementUI文档。每次切换页码，都会触发load，重新加载数据。

斑马纹表格

stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

带边框表格

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

带状态表格

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

固定表头

纵向内容过多时，可选择固定表头。 只要在attr中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

固定列

横向内容过多时，可选择固定列。 固定列需要使用fixed属性，它接受 Boolean 值或者left right，表示左边固定还是右边固定。fixed是el-table-column的属性，所以把fixed定义在columns里。

固定列和表头

横纵内容过多时，可选择固定列和表头。固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。多级表头不支持在columns里面配置，还是按照Element-UI的写法就可以

单选

Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，COLUMNS可以增加一列，设置type属性为index即可显示从 1 开始的索引号。

多选

实现多选非常简单: 给columns添加一个列定义，设type属性为selection即可；如果要控制选中的数据，可以按着Element-UI 来定义，也可以直接引入TableMixin，如下使用<rc-table :on-table="rcTableOn"></rc-table>即可。rcTableSelectionList保存着选中的数据。

排序

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

筛选

在列中设置filters filter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。注意columns的列里如果传入了filters，必须传prop。

自定义列模板

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

展开行

通过设置columns的某一列 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

表尾合计行

将rc-table的attr属性的show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用（在attr里传入）summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

合并行或列

通过给rc-table的attr传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

自定义索引

通过给columns的 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

带toolbar的表格

通过给rc-table组件传入一个toolbar的具名插槽即可，定义表格头部的toolbar。这个插槽里放什么内容都可以，不一定是rc-toolbar组件。

Attributes

| 参数 | 说明 | 可选值 | 类型 | 默认值 | |---------|-------- |---------- |-------- |---------- | | isReload | 组件创建时，是否自动进行数据获取 | - | Boolean | true | | page | 分页组件的相关配置，具体的请查看ElementUI文档 | - | Object | {enable: true,sizes: [10, 20, 50, 100, 150],size: 10, layout: 'total,sizes, prev, pager, next'} | | columns | 表格列，对象数组，一个对象就是一个el-table-column | - | Array | [] | | on | 事件监听,用来接收要绑定到table上的事件的，具体的请查看ElementUI文档 | - | Object | {} | | attr | 表格属性,接受el-table的Attributes,具体的请查看ElementUI文档 | - | Object | {} | | rcClass | 表格样式 | - | Object | {} | | rcStyle | style | - | Object | {} |

Events

| 事件名称 | 说明 |回调参数 | |---------- |-------- |---------- | | load | 加载数据时被触发 | 返回rc-table实例 |

Methods

| 方法名 | 说明 | 参数 | |---------- |-------- |---------- | | refresh | 刷新表格数据 | - | | currentChange | 改变表格当前页码，同时触发load事件加载数据| currentPage：要改变的页码 | | sizeChange | 显示多少页改变，同时触发load事件加载数据| size | | sortChange | 排序change，同时触发load事件加载数据| 参数是Object,{ prop：要排序的列, order排序方法 } | | $table | 暴露表格对象，返回的对象可以直接调用ElementUI的api| - |