首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

20 多个好用 Vue 组件库

特点如下: 可选行及粘性头部 虚拟分页 下载客户组件数据 CSV 有数据支持多级分组 Tailwind 主题 Handsontable 地址:https://github.com/handsontable...支持对加载后表格页面的处理:添加/删除行/列,合并单元格等操作。 此外,它还适用于 React、Angular 和 Vue。...特点如下: 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid.../ag-grid Ag-Grid 是一个基于 Vue.js 数据表格组件。...内部 ag-Grid 引擎是在 TypeScript 实现,零依赖关系。 ag-Grid 通过包装器组件支持 Vue,你可以在应用程序,就像其他任何 Vue 组件一样使用 ag-Grid

7.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    20多个好用 Vue 组件库,请查收!

    特点 可选行及粘性头部 虚拟分页 下载客户组件数据CSV 有数据支持多级分组 Tailwind 主题 Handsontable 地址:https://github.com/handsontab...... handsontable是一款页面端表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。...特点 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid/...Ag-Grid 是一个基于Vue.js数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript实现,零依赖关系。...ag-Grid通过包装器组件支持Vue,你可以在应用程序,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。

    7.5K10

    我是如何爱上ag-grid框架

    1_QKNFkNs4b6n7igI60hAnJQ.png 2017年秋天,我开始为一家外包公司工作,继续开发CRM(客户关系管理)系统。...与每个管理系统一样,我们需要选择一个网格来显示我们数据,而我前任已经在应用程序中使用了两个网格 -  ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。...我创建了这个填充bug怪物而不是解决网格项目,只是在我代码库添加了很多猴子补丁。我当时年少无知。 目标 所以改变了目标。...后来,我添加了自己数据虚拟化(在ag-Grid上重构之前)并且享受了网格API提供一些很酷东西。完成后,CRM开发很快。...“ 现在,对JavaScript数据网格,尤其是AngularJS 1.x教育和经验,我只是笑着教他们关于ag-Grid

    6.2K40

    基于 Angular Material Data Grid 设计实现

    这比写一堆 DOM 结构要简洁很多,可以说是 CRUD 业务大杀器之一。...Angular Material 对于 table 封装已经足够灵活,但是模板定义依然很繁琐,也缺少很多刚需功能。...column hiding(列显示隐藏) checkbox selection(数据选择) row selection(行选取,可多选) cell selection(单元格选取,暂时支持单选) expandable...模板是 angular 组件极其灵活一个功能。大部分优秀第三方组件都具有自定义模板能力,而在 Data Grid ,模板更是一个不可或缺功能。...官网示例:Column hiding & moving 列显示隐藏以及排序是非常常见需求,这类需求曾被产品经理折磨了无数次。

    5K20

    AgGrid框架使用感受及前景分析

    这时一个成熟开发者当然应该用自己技术来引导甚至改变用户需求,但无论如何,首先要做是建立一个基本数据对象模型,比如ER图。...最重要关系就是2个主要实体之间work,work关系还拥有属性:2个实体之间存在多对多关系,所以需要另外一个数据表来存放。...Ag-Grid:媲美Excelweb框架 完美的集合关系模型如何在前端展现呢,最好办法呢就是画一个表格,经过1个多月框架抉择,我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。...著名前端框架ag-grid就是在这个理论上诞生。 简而言之,表格即图表,图表即表格,它们在数据上是一致,只是表现形式不同而已。...设计focus对象 focus对象是我常用一种自定义对象,通常挂载在window.app上,但在aggrid这个重量级框架面前,也可以挂载在元素上面。

    6K40

    将文件系统作为数据体验如何?

    CSV with ag-grid & chart.js 功能概述 基于web表格处理/图形渲染系统, 支持csv文件导入导出, ag-grid本地scrud, 以及chart.js框架图表统计...网盘系统 本系统没有数据库, 没有数据库, 数据库!...前后端模块一览 ag-grid(enterprise): 不用说了, 所见过最强大, 最良心, 文档最完善网格框架 chart.js: 一种轻量级统计图框架, 支持八种图表 CryptoJS: js...: 用于express-session文件存储(千万别存在内存) path: 有时候路径拼接任务多了,斜杠就不知道怎么摆放了,干脆上框架.....: 将本地csv文件导入到浏览器中进行计算和渲染 upload: 上传本地csv文件备份到服务器文件系统 server: 打开服务器文件系统 export: 将浏览器编辑后新表格导出为csv文件

    3K20

    如何向奶奶解释SQL与NoSQL区别

    所以我答案是这样: 尊敬祖母,数据库就是用来存储数据仓库,就像我们生活存放物品容器一样,但是容器也有通用和专用之分,比如塑料袋就是通用容器,因为塑料袋可以装各种东西:即可以装糖果,也可以装铅笔...一维数据也就是线性表,所有复杂数据结构都建立在线性表之上,任何二维,三维数据结构也是由线性表组成。线性表俗称列表,从“人类本质是复读机”理论上看,世间万物都是由列表(集合)组成。...关系代数研究是二维线性表之间可以发生各种操作,也就是表格语言,最基本操作包括矩阵学水平分割和垂直分割:分别对应选择和投影。...著名前端框架ag-grid就是在这个理论上诞生: ?...关系代数,SQL,NoSQL,线性表,统计图,表格,ag-grid这些研究都是集合,都是列表,都是最本质,永恒不变东西,所以才有那么多学者投入到这个永不过时领域。

    1.3K50

    从一个开源项目到庞大开源矩阵,他是怎么做到

    很多开源作者都经历过如下过程: 有个好开源点子 撸起袖子加油干 开源项目获得社区认可,star数量就是自己动力 随着维护时间变长,遇到挫折(时间上消耗、伸手党不理解...)...TanStack矩阵TanStack Query(即React Query)官方课程[3]已经售出8w份了,按当前折扣价156刀算,这部分收入有税前1200w刀了。...nozzle主营业务是:反向爬取Google搜索结果页数据,将这些数据整合分析后,提供给有SEO需要广告主。 这就需要做很多数据可视化相关工作。...当时nozzle技术栈是Angular,使用ag-grid实现表格。 为了项目的后续发展,「Tanner」决定将项目整体迁移到React技术栈。...得益于React Hooks思想被社区广泛接受,越来越多框架都实现了自己Hooks(比如Vue3Composition API)。

    1.4K20

    n-tier理论数据间是如何传递?什么是BO,DO,PO,VO,DTO,BoDto,DoDto?

    数据传递 马克-to-win:一 个数据表对应一个PO(Persistant Object),这好理解。...VO相对于网页表单数据,也许对应n个PO,而且和PO数据格式也许不一样。马克-to-win:(表单2012/1/1而数据是 2012-1-1)。...DTO不用于VO,不但因为二者功能不同,(DTO用于专门间传输,VO用于持有表单数据)而且DTO也许有很多VO里没有的数据, 比如Service方法现场产生加密密码,各种加密标志,收到短信验证码等...马克-to-win:Service接着调用BO,BO调用DO,(这个过程 应该是涉及业务范围越来越小,越来越具体,就像中央委托给东北局,东北局再委托给辽宁省,处理某个事一样),DTO在这个过程承载数据量也必然越来...马克-to-win:注 意VO,PO,DTO都是没有业务方法。只是数据而已。它们存在使得之间更好解耦。(一改变不妨碍另一)。分工越精细化,越不容易出 错。

    96920

    基于web项目资源分配系统

    基础功能之上还有一些进阶功能需求统计功能,包括排序、过滤、索引、制图,还有UI上“隐含“要求比如动画、遮罩、弹窗、字体。...后端仍然是经典MVC设计模式,结合express严格分离了数据,业务逻辑以及显示[6]。 中间http设计,选择业界最流行restful api[2]设计模式。...这三在应用上分别对应着数据库,前端,后端,但都是在后端代码连接在一起,这表示,虽然三分工明确,但一定通过其中业务逻辑(controller)将剩下2联系起来。...本系统自然也遵循了MVC原则:将mongodb连接库封装而成读写模块作为模型挂载在全局对象上,将前端静态文件目录检索接口放在路由器最前端位置作为显示,将所有的路由模块以http方法分类放在路由器核心位置作为逻辑...5.2.7 数据过滤模块 数据过滤模块是在MVC业务逻辑请求回调函数中放置一些assert断言方法对request对象携带参数进行验证和过滤,比如最常使用验证是否登录: assert(req.session.user

    4.5K70

    《后现代全栈系统设计与应用》

    基础功能之上还有一些进阶功能需求统计功能,包括排序、过滤、索引、制图,还有UI上“隐含“要求比如动画、遮罩、弹窗、字体。...后端仍然是经典MVC设计模式,结合express严格分离了数据,业务逻辑以及显示[6]。 中间http设计,选择业界最流行restful api[2]设计模式。...这三在应用上分别对应着数据库,前端,后端,但都是在后端代码连接在一起,这表示,虽然三分工明确,但一定通过其中业务逻辑(controller)将剩下2联系起来。...本系统自然也遵循了MVC原则:将mongodb连接库封装而成读写模块作为模型挂载在全局对象上,将前端静态文件目录检索接口放在路由器最前端位置作为显示,将所有的路由模块以http方法分类放在路由器核心位置作为逻辑...5.2.7 数据过滤模块 数据过滤模块是在MVC业务逻辑请求回调函数中放置一些assert断言方法对request对象携带参数进行验证和过滤,比如最常使用验证是否登录: assert(req.session.user

    1.1K20

    前端原生开发解决方案

    以.js 文件为组件 文件通过字符串模板定义 html 和 css,然后在自定义元素构造函数引入它们。...-- 等同于 --> 今天日期是:12/19/2021 数据绑定 数据到样式单向绑定,通过按需更新 CSS 全局变量实现,如若需要修改元素文本值则必须通过选择器来查找元素...兼容性 使用原生开发应用在兼容上不如使用框架,因为无论 Vue、React、Angular 都偏向使用古老语法和接口从而保证向下兼容旧版浏览器,但代价是代码量翻倍,使用原生开发,并尽可能采用最新语法和接口能够大大提升性能...然后,不到万不得已别使用 SSR 服务端渲染,引入 SSR 给整个生产线增加了一“构建时”,增加了调试成本。...虚拟 DOM 99% 页面交互都不需要引入虚拟 DOM (既有优点也有缺点),只有当巨量 DOM 元素存在时候,比如大型分页表格,这时才需要考虑虚拟 DOM,而常见表格框架例如 ag-grid、tabulator

    1.4K30

    何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程,我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...您可以通过在命令提示符运行以下命令来确保系统上安装了 Node,该命令应显示已安装 Node 版本: $ node -v 接下来,运行以下命令来安装 Angular CLI: $ npm install...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 输出目录。必须从工作空间目录执行。 config: 检索或设置 Angular 配置值。...lint (l): 在给定项目文件夹 Angular 应用程序代码上运行 linting 工具。 new (n): 创建一个新工作区和一个初始 Angular 应用程序。...结论 在本教程,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新 Angular 项目。

    47600
    领券