npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rrc-materials/table

v0.2.6

Published

rrc materials for Table

Downloads

14

Readme


showNav: true

Table

@rrc-materials/table for rrc

Table 表格

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

:::tip

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

基础表格

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

分页表格

rc-tablepage传入分页配置,就可以启用分页功能了,兼容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,表示左边固定还是右边固定。fixedel-table-column的属性,所以把fixed定义在columns里。

固定列和表头

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

流体高度

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

多级表头

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

单选

Table 组件提供了单选的支持,只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件,它会传入currentRowoldCurrentRow。如果需要显示索引,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,会传入两个参数:rowcolumn,可以根据自己的需求进行处理。

筛选

在列中设置filters filter-method属性即可开启该列的筛选,filters 是一个数组,filter-method是一个方法,它用于决定某些数据是否显示,会传入三个参数:value, rowcolumn。注意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-tableattr传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

自定义索引

通过给columnstype=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| - |