el-table-virtual-scroll

v2.0.1

The virtual scrolling component developed based on the Table component of Element-UI supports dynamic height and solves the problem of scrolling stuck when the amount of data is large. For more information about how to use this package see README

Latest version published 2 months ago

License: ISC

NPM

GitHub

Package Health Score

70 / 100

security
No known security issues
popularity
Limited
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.0.1	\|	09/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.4.6	\|	08/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.3.1	\|	06/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.2.0	\|	05/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.14	\|	05/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

ISC

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (345)

GitHub Stars: 233
Forks: 42
Contributors: 3

Direct Usage Popularity

The npm package el-table-virtual-scroll receives a total of 345 downloads a week. As such, we scored el-table-virtual-scroll popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package el-table-virtual-scroll, we found that it has been starred 233 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 3
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like el-table-virtual-scroll is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 7
Open PR: 0
Last Release: 2 months ago
Last Commit: 2 months ago

Further analysis of the maintenance status of el-table-virtual-scroll based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that el-table-virtual-scroll demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 2 years
Dependencies: 3 Direct
Versions: 60
Install Size: 16.8 MB
Dist-tags: 1
# of Files: 148
Maintainers: 1
TS Typings: No

el-table-virtual-scroll has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

el-table-virtual-scroll

基于Element-UI的Table 组件开发的虚拟滚动组件，支持动态高度，解决数据量大时滚动卡顿的问题。

⚠️仅支持vue2。

demo & 源码：https://xiaocheng555.github.io/el-table-virtual-scroll/

版本说明

当前版本 2.x.x

重构树形表格和懒加载功能，兼容 element-ui 树形表格原有的属性、事件、方法，支持树形表格筛选；废弃了模拟树结构的方案和相关的api；同时扩展了树形表格的方法
优化 element-ui 多选、扩展行功能，支持 element-ui 多选、扩展行原有的属性、事件、方法
2.x.x 版本不支持 1.x.x 树形表格功能，其他都能兼容

旧版本 1.x.x

旧版本说明文档：https://github.com/xiaocheng555/el-table-virtual-scroll/blob/master/README-v1.md

旧版本demo：https://xiaocheng555.github.io/el-table-virtual-scroll/v1

安装

$ npm i el-table-virtual-scroll -S

用法


  
  

...

import VirtualScroll from 'el-table-virtual-scroll'

export default {
  component: {
    VirtualScroll
  },
  data () {
    list: [
      {
        id: 1,
        text: 'content'
      },
      // ...... 省略n条
      {
        id: 2000,
        text: 'content2'
      }
    ],
    virtualList: []
  }
}

el-table-virtual-scroll 组件

Props

参数	说明	类型	可选值	默认值
data	总数据	Array	必填
keyProp	key值，data数据中的唯一id【⚠️若keyProp未设置或keyProp值不唯一，可能导致表格空数据或者滚动时渲染的数据断层、不连贯、滚动不了】	string	—	id
itemSize	每一行的预估高度	number	—	60
scrollBox	指定滚动容器；在指定滚动容器时，如果表格设置了height高度，则滚动容器为表格内的滚动容器；如果表格未设置height高度，则自动获取外层的滚动容器，直至window容器为止	string	'window'、css选择器	-
buffer	顶部和底部缓冲区域，值越大显示表格的行数越多	Number	—	200
throttleTime	滚动事件的节流时间	number	—	16
dynamic	动态获取表格行高度，默认开启。设置为false时，则以itemSize为表格行的真实高度，能大大减少虚拟滚动计算量，减少滚动白屏；如果itemSize与表格行的真实高度不一致，可能导致滚动时表格数据错乱、抖动、底部有空白	boolean	—	true
virtualized	是否开启虚拟滚动	boolean	—	true
rowSpanKey	当使用了el-table的合并行，必须设置rowSpanKey函数并返回每组合并行中共用的key值	Function(row, index)	—	-
selectionSort	支持多选可自定义选中数据的排序规则，默认为 `true` 按选择顺序排，传入 `false` 为按列表中的顺序排，传入函数为自定义排序规则	Boolean、Function	—	-
getElTable	获取 `组件，默认获取` 的第一个子组件；如果 `组件经过用户封装，那么需要使用该方法返回正确的` 组件【可通过 ref、$children 返回正确的值】	Function	—	-
keepScroll	当使用v-show，keep-alive 切换表格显示时，会保持原来滚动位置	boolean	—	true

Methods

方法名	说明	参数
scrollTo	滚动到第几行；index - 行数索引值；offset - 偏移位置	(index: number, offset: number)
scrollToRow	滚动到对应的行；row；offset - 偏移位置	(row: object, offset: number)
update	更新，会重新计算实际渲染数据和位置	-
setCurrentRow	用于单选 ``, 设定某一行为选中行	row
slowOnMousewheel	减缓滚轮滚动的速度，slowNum参数为减缓参数，默认为1，数值越大滚动越慢；在mac电脑上，谷歌、火狐浏览器在 `自定义固定列` demo 上快速滚动会有白屏，可以使用该方法减少白屏。请根据实际情况使用，使用不当可能会让表格滚动卡顿。【注意：滚轮滚动有效，拖动滚动条滚动无效】	slowNum
getParentNode	【扩展树形表格】获取父节点	row
getParentNodes	【扩展树形表格】获取所有父节点	row
getChildNodes	【扩展树形表格】获取子节点	row
reloadNode	【扩展树形表格】重新加载节点	row
expandAllNodes	【扩展树形表格】展开所有树节点	-
unexpandAllNodes	【扩展树形表格】收起所有树节点，懒加载节点除外	-

Events

事件名称	说明	参数
change	计算完成真实显示的表格行数	(renderData, start, end)：renderData 真实渲染的数据，start和end指的是渲染的数据在总数据的开始到结束的区间范围

virtual-column 组件

使用做表格虚拟滚动，是不支持 `ElementUI` 表格的原有的索引、多选、扩展行等功能，需要使用来兼容。组件内封装了，支持传入 组件的props属性。其中 会在表格row数据上扩展 $v_checked、$v_expanded ... 等属性，请悉知。

更多demo & 源码查看：https://xiaocheng555.github.io/el-table-virtual-scroll/

引入

import { VirtualColumn } from 'el-table-virtual-scroll'

...

Props

参数	说明	类型	可选值	默认值
*	支持 `` 组件的props属性，如label, fixed, prop, width, min-width, index 等等	-	—	-
type	type="index" 为索引；type="selection" 为多选；type="radio" 为单选；type="expand" 为扩展行；type="tree" 为树形表格	String	选填
vfixed	固定列。使用 position: sticky; 来实现固定列，不会生成额外table，滚动更丝滑；使用时，需要设置table的headerCellStyle、cellStyle（注意组件必须按固定列顺序排列最左或最右），参考demo	String/Boolean	left/right/true	-

el-table-virtual-scroll 组件注意事项

使用组件前，请确保项目中有引入 element-ui 组件库。
组件最好写上 `row-key` 属性，能避免一些奇怪的问题。例：，其中id为数据中唯一key值。
Element-UI Table 的多选、扩展行、索引、树功能，需要将 改为 组件。

更新内容

2024-9-2

重构：兼容树形表格；兼容扩展行、多选原生事件、属性、方法；
npm 2.0.0 版本发包

2024-9-16

修复virtualized更改在筛选和树形表格上会有问题
修复多选select-change事件在表格数据更新后未触发，导致旧数据未清除 #100
npm 2.0.1 版本发包

el-table-virtual-scroll dependencies

fs-extra gh-pages normalize-wheel

FAQs

What is el-table-virtual-scroll?

The virtual scrolling component developed based on the Table component of Element-UI supports dynamic height and solves... Visit Snyk Advisor to see a full health score report for el-table-virtual-scroll, including popularity, security, maintenance & community analysis.

Is el-table-virtual-scroll popular?

The npm package el-table-virtual-scroll receives a total of 345 weekly downloads. As such, el-table-virtual-scroll popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is el-table-virtual-scroll well maintained?

We found that el-table-virtual-scroll demonstrated a healthy version release cadence and project activity. It has a community of 3 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is el-table-virtual-scroll safe to use?

The npm package el-table-virtual-scroll was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 8 November-2024, at 22:54 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (345)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

el-table-virtual-scroll

版本说明

当前版本 2.x.x

旧版本 1.x.x

安装

用法

el-table-virtual-scroll 组件

Props

Methods

Events

virtual-column 组件

引入

Props

el-table-virtual-scroll 组件注意事项

更新内容

2024-9-2

2024-9-16

el-table-virtual-scroll dependencies

el-table-virtual-scroll development dependencies

FAQs

What is el-table-virtual-scroll?

Is el-table-virtual-scroll popular?

Is el-table-virtual-scroll well maintained?

Is el-table-virtual-scroll safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues