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

a-table-virtual

v1.0.9

Published

是一个基于Vue3、ant-design-vue、a-table组件开发虚拟表格

Downloads

112

Readme

介绍

ATableVirtual是一个基于 Vue3ant-design-vuea-table组件开发,更加轻量级的插件,让我们能更专注于业务组件的开发。

✨ 特性

  • 🌈 ATableVirtual暂时的目标是打造一个1千行&&1千列的性能王者,如果有大量数据需要渲染,界面可能会出现抖动。
  • 📦 开箱即用的a-table-virtual组件,更加轻量级、少侵入性代码、无需改造业务代码。
  • 🎨 如果有庞大业务需求,还是建议使用商业版本的 Surely Vue Table,但是很遗憾,这是一个商业化组件。并不能直接使用。

🌈 效果

🤝 问题反馈

问题反馈

🔗 官网地址

atd-table-virtual

📦 安装

// 安装插件
    npm i a-table-virtual
// 导入插件
    import VirtualTablePlugin from "a-table-virtual";
    app.use(VirtualTablePlugin);

🔨 示例

// 在组件中使用
    <a-table
      v-virtual-table-scroll
      :columns="columns"
      :data-source="dataList.slice(start, over)"
      bordered
      :pagination="false"
      :scroll="{ x: 0, y: scrollHeight }"
    >
    </a-table>

    <script setup>

    import {inject } from "vue";
    const { start, over } = inject("dataListOptions");
    let scrollHeight = 300;

    </script>

⚙️ 为什么要去搞这个轮子

  • 在前端开发领域,表格一直都是一个高频出现的组件,尤其是在中后台和数据分析场景。 但是,对于Table来说,当一屏里超过 1000 条数据记录时,就会出现卡顿等性能问题,体验不是很好。

  • 通过虚拟化表格组件,超大数据渲染将不再是一个头疼的问题。

  • 针对于目前 ant-design-vue 中的 Surely Vue Table,很遗憾,这是一个商业化组件。并不能直接使用。

功能点

以下是当前已经支持和正在开发中的功能,如果感兴趣可以一起~~。

| 功能 | 状态 | | ------------ | ---- | | Y轴的虚拟滚动 | ✅ | | X轴的方向的懒加载 | ✅ | | X轴 && Y轴的虚拟滚动 | 🚧 | | V2版本的支持 | 🚧 | | 暴露按需加载的load方法 | 🚧 |