@rrc-materials/table

---

showNav: true

Table

@rrc-materials/table for rrc

<script> import Basic from './demo/basic.md' import ZebraPattern from './demo/zebra.pattern.md' import Border from './demo/border.md' import RowStatus from './demo/row.status.md' import FixedThead from './demo/fixed.thead.md' import FixedCol from './demo/fixed.col.md' import FixedColThead from './demo/fixed.col.thead.md' import MaxHeight from './demo/max.height.md' import MoreThead from './demo/more.thead.md' import RadioRow from './demo/radio.row.md' import CheckoutRow from './demo/checkout.row.md' import Sort from './demo/sort.md' import FilterTable from './demo/filter.md' import RenderCol from './demo/render.col.md' import Expand from './demo/expand.md' import ShowSummary from './demo/show.summary.md' import MergeRowCol from './demo/merge.row.col.md' import IndexCol from './demo/index.col.md' import PageTable from './demo/page.table.md' import Toolbar from './demo/toolbar.md' export default { components: { Basic, ZebraPattern, Border, RowStatus, FixedThead, FixedCol, FixedColThead, MaxHeight, MoreThead, RadioRow, CheckoutRow, Sort, FilterTable, RenderCol, Expand, ShowSummary, MergeRowCol, IndexCol, PageTable, Toolbar } } </script>

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	-