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

20 多个好用的 Vue 组件库

支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。 此外,它还适用于 React、Angular 和 Vue。...特点如下: 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid...其中,“ag” 表示 “agnostic”。内部 ag-Grid 引擎是在 TypeScript 中实现的,零依赖关系。...ag-Grid 通过包装器组件支持 Vue,你可以在应用程序中,就像其他任何 Vue 组件一样使用 ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。...你甚至可以使用 Vue 组件来自定义网格 UI 和单元格内容/行为。

7.9K10

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

同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。 此外,它还适用于React、Angular和Vue。...特点 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid/...Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。...ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。...你甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。

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

    【JavaScript数据网格】上海道宁51component为你带来企业JS开发人员首选的数据网格——AG Grid

    例如适应性工具AG Grid的API和无依赖包意味着 AG Grid 也可作为许多 Data Vizualisation 和 ML 工具(如 R 和 Streamlit)的插件使用。...09、永远进步AG Grid专注于集成到网格中的核心功能。AG Grid不提供组件库,因为AG Grid所有的开发工作都致力于打造更好的网格。...用户将能够在 Excel 中编辑数据,然后在完成后将数据复制回网格中。03、栏目菜单列菜单从列标题下拉。使用默认选项或提供您自己的选项。04、上下文菜单右键单击单元格时会出现上下文菜单。...使用默认选项或提供您自己的选项。05、Excel导出以本机Excel格式导出,该格式将保持列宽并允许导出样式。例如,您可以为网格中的单元格着色,并在 Excel 导出中为等效的单元格着色。...07、主/细节使用Master Detail扩展行并在内部有另一个包含不同列的网格。08、项目AG Grid有一个API,支持开发人员构建高级功能和扩展网格。

    4.4K40

    【译】W3C WAI-ARIA最佳实践 -- 布局

    数据网格示例: 网格的三个示例实现,包括与呈现表格信息(如内容编辑,排序和列隐藏)相关的功能。 高级数据网格示例: 具有类似于典型电子表格的行为和功能的网格示例,包括单元格和行选择。...如果网格包含带有用于选择行的复选框的列,则该键可以用作在焦点不在复选框时勾选框的快捷方式。 Control + A: 选择所有单元格。...例如如果一个单元格包含一个按钮,网格导航键在单元格上放置焦点,而不是按钮上,屏幕阅读器会朗读出按钮的标签,但不会告知用户存在一个按钮。...这些小部件的示例包括链接,按钮,菜单栏,切换按钮,单选按钮(不是单选按钮组),开关和复选框。 一个单元格包含文本或一个单独的图形,网格导航键在单元格上设置焦点。...如果网格提供排序功能,则在头部单元格上为 aria-sort 属性设置合适的值,来对行或列进行排序,如 grid and table properties 部分所述。

    6.2K50

    Web前端:2022年十大React表库

    Material Styled UI 是使其如此成功的主要属性之一。它提供了几个不同的元素,可以在任何复杂的应用程序中对其进行定制和使用。...Rc-Table 5、另一个有用的 React Table 库是 Rc-Table,它由许多独特的功能和轻量级组成,有助于通过列标题上的下拉菜单过滤数据,它还提供了很多带有源代码的示例。...广泛的功能包括数据绑定、编辑、类 Excel 过滤、自定义排序、行聚合、Excel、CSV 和 PDF 格式收集和支持。为了获得出色的性能,数据网格具有集成架构。...React-bootstrap-table 是一个使用 Bootstrap 的反应表组件。它提供单选或多选、列排序和动态调整大小。许多功能,如分页、本地或远程数据排序等,都可以轻松地从外部添加。...React–Datasheet 10 它是创建电子表格的简单反应组件。React–Datasheet 允许你替换整体结构(行、单元格、工作表本身)的渲染器,甚至可以替换特定单元格的编辑器和查看器。

    12410

    07.HTML实例

    HTML 段落 HTML 段落 更多段落 本例演示在 HTML 文档中折行的使用。...此例演示如何在 HTML 文件中写地址。 此例演示如何实现缩写或首字母缩写。 此例演示如何改变文字的方向。 此例演示如何实现长短不一的引用语。...制作图像链接 创建图像映射 点击图片映射到另一张图 HTML 表格 简单的表格 没有边框的表格 表格中的表头 带有标题的表格 跨行或跨列的表格单元格 表格内的标签 单元格边距(Cell padding...创建一个按钮 本例演示如何在数据周围绘制一个带标题的框。...带有文本域与输入域的表单 点击提交 带有复选框与提交按钮的form表单 点击提交 带有单选框与提交按钮的表单 点击提交 发送邮件表单 HTML iframe 内联框架 (HTML页面中插入框架)

    8.2K40

    CSS Grid 那些鲜为人知的内幕

    轨道 ❝轨道是两个相邻网格线之间的空间。 ❞ 我们可以将它们看作是网格的列或行。 在这个例子中,这是第二行网格线和第三行网格线之间的轨道。 网格区域 ❝网格区域是由四条网格线围成的总空间。...例如,在表格布局中,每行都是用 创建的,每个行中的单元格则使用 或 : 网格」,因为我们没有明确定义任何结构。 ❞ 隐式网格是动态的;根据子元素的数量将添加和删除行。每个子元素都有自己的行。 ❝默认情况下,网格容器的高度由其子元素确定。...当我们想让特定区域跨越多行或多列时,我们可以在我们的模板中「重复该区域的名称」。在这个例子中,sidebar区域跨越了两行,所以我们在第一列的两个单元格中都写了 sidebar。...在这个示例中,我设置了一组按钮,并使用 Grid 对它们进行了排列: 如果我们使用的是带有键盘的设备,可以通过点击左上角的第一个按钮(One),然后按 Tab 键逐个移动按钮。

    16610

    java swing项目桌面软件还是蛮香的,至少有了我自己的桌面软件|Java 开发实战

    datamModel.fireTableRowsUpdated(0, 5);的意思是通州JTable显示模块去刷新从1-6行的所有数据,所以说比如你更新了第一行的数据,而你用的两个参数是1,4.那么恭喜你...,你的更新JTable无法实现,因为他只更新从第二行开始到第五行的数据。...bool类型的,那么我们只需要在getColumnClass进行处理就行了,在我们的bool的单元格返回bool类JTable就会采用bool类型的渲染器了。...return getValueAt(0, c).getClass();这样我们就可以显示一些其他的控件了,还有一些比如每行都需要一行按钮来实现修改改行的功能,这些按钮正常我们不需要再数据中添加(避免数据过于庞大...通过返回的不同的类来调用不同的渲染器,现在我们不通过返回类的方式来渲染,而是自己定义一个渲染器,然后通过JTable提供的方法设定用该渲染器渲染该单元格!

    40210

    【Unity3D】Unity 组件 ② ( 删除 Light 组件 | 添加 Light 组件 | 构造物体组件 | 添加网格过滤器组件 | 添加网格渲染器组件 )

    文章目录 一、删除 Light 组件 二、添加 Light 组件 三、构造物体组件 1、创建空物体 2、添加网格过滤器组件 3、添加网格渲染器组件 一、删除 Light 组件 ---- 选中 平行光源...物体 , 在右侧的 Inspector 检查器窗口 中 , 点击 Light 组件右上角的 按钮 , 在弹出的菜单中选择 " Remove Component " 选项 , 即可删除该组件 ;...; 此时该 空物体 只有一个 Transform 组件 ; 2、添加网格过滤器组件 选中物体后 , 在 Inspector 检查器 窗口 中 , 点击 " Add Component " 按钮 ,...Mesh Filter 网格过滤器中 ; 3、添加网格渲染器组件 再次在 Inspector 检查器窗口 点击 " Add Component " 按钮 , 添加 Mesh Renderer 网格渲染器组件..., 添加完毕后 , 模型会变成洋红色 ; 点击 Inspector 窗口 中的 Mesh Renderer 组件 中的 Materials 属性 的 Element 0 后的 按钮

    74220

    从零入门Processing粒子系统

    在成熟的游戏引擎如 Unity、UE 上都有自己的粒子系统: 粒子系统的构成 从系统设计的角度来看的话,粒子系统一般可以分为发射器、运动器、渲染器、回收器这样 4 个模块。...发射器:发射器负责粒子的生成、初始位置、初始速度、角速度等等 运动器:运动器负责修改粒子的运动状态和参数,会受到用户交互、环境参数的影响,如果粒子在物理世界中,粒子的运动还需要物理引擎来驱动 渲染器:顾名思义...,就是渲染绘制,如粒子的大小、颜色、贴图或者 shader 这样的控制,使用渲染器来进行渲染绘制出来。...后来人民邮电的陈编辑联系到了小菜,告知这本书已经取得了作者的翻译授权,为了避免侵权,需要关闭和删除掉 github 的翻译,我们小组作为 GPP 翻译组负责了这本书的中文化。...由于每个粒子都有最大的观察半径 40,我便可以将 1280 × 720 的活动区域分割成 32 × 18 个长宽 40 的正方形网格,这样,每个粒子只需要遍历所在网格周围的九个网格。

    1.8K20

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

    Ag-Grid:媲美Excel的web框架 完美的集合关系模型如何在前端展现呢,最好的办法呢就是画一个表格,经过1个多月的框架抉择,我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。...例如,使用“ table”,“ tr”和“ td”标签时,将1000条带有20列的记录加载到浏览器中,则该页面最终将带有许多呈现的DOM元素。这将大大降低网页速度。...例如,如果您将1,000条记录和20列加载到网格中,但用户只能看到50条记录和10列(因为其余的未滚动到视图中),则网格仅呈现用户的50行和10列可以实际看到。...AgGrid中的Ag取自“Agnostic”,直译过来是"不可知论者",虽然我也不明白啥意思,但官方的解释是:aggrid零依赖,零依赖的框架就叫”不可知论框架“((lll¬ω¬))。...当鼠标在某一个单元格右击的时候就会自动的刷新focus对象,在右键菜单中就能对当前对象做相应的操作。这就是聚焦的哲学。

    6K40

    按钮与交互-使用按钮触发操作

    在本节中,我们将介绍一个重要且简单的元素,即按钮。这个小元素可以改变整个UX。我们将使用该按钮来缩放我们的3D模型。此外,我们将尝试更改手机的壁纸。...约束 IBAction为 现在我们有了按钮,我们需要给它们功能。通过单击右上角带有双圆圈的图标启用助理编辑器。您将看到我们同时拥有主故事板和代码。...在swift文件中,您将看到一个与之前的ARSCNView链接的IBOutlet。由于我们删除了那个,将新的ARSCNView链接到该Outlet。...IBActions 类变量 2个第一个按钮的目的是能够调整我们的3D模型的大小。问题是iPhoneNode的声明是渲染器方法的局部变量。...diffuse.contents = UIImage(named: "art.scnassets/AR-Screen.png") } 结论 在本节中,我们学习了如何在Storyboard中放置按钮并约束它们

    4.6K20

    【MFC拓展库】上海道宁与BCGSOFT合作为您带来专业的Micrisoft Windows开发业务组件

    这是一个完全换肤的界面,可以应用于各种控件集,例如功能区、菜单、工具栏、停靠窗格等。这种风格的主要特点是:扁平的、Windows 8/10风格的UI。带有“返回”圆形按钮的全屏后台视图。...连续无限数量的项目按单列排序按多列排序隐藏/显示列集成字段选择器拖放列就地单元格编辑单行和多行选择单项和多项(网格单元格)选择将数据复制到剪贴板单元格拖放支持键盘导航就地工具提示列大小调整行大小调整 -...可变行高(对于 .NET)带有或不带有行号的行标题。...自动生成的行和列(对于 .NET)导出为 HTML 和 RTF单元格边框 - 具有不同线条样式的粗细边框(适用于 .NET)浮动文本 - 如果相邻单元格为空,则在相邻单元格上绘制文本文本环绕和修剪。...Visual Studio 2008中包含的新MFC版本基于 BCGControlBar Pro技术,但MFC版本中不包含一些重要的库组件,例如图表、网格、日历、编辑器等。

    5.6K20

    Google Earth Engine ——带缓冲的随机样本选择

    下一步是在每个网格单元中随机选取一个点。这可以通过使用reduceConnectedComponents()单元格结果加上第二个随机图像来完成(仍然在图像空间中),选择每个网格单元格中的最大随机值。...此示例使用原始网格大小 1/16 的第二个随机图像的网格,这意味着在每个网格单元内生成了 256 个随机点。random == maximum每个网格单元格中的位置被标记为 1 值,其余值被屏蔽。...如果需要“严格”遵守缓冲距离,那么网格中每隔一行和一列的单元格可以使用ee.Image.pixelCoordinates()和一些数学运算来屏蔽掉。...删除这些单元可以保证每个点distance与其最近邻居的2*distance平均距离最小。 具有偶数坐标的网格单元已被丢弃,从而保证每个单元中的随机点与其最近的邻居至少有给定的距离。...该max减速机可以让你指定额外的输入:它找到的任何沿最大(如协或像素坐标)来进行。 如果您要为例如:k 折交叉验证采集多个样本,则每次都应该偏移网格,这样就不会对每次折叠使用完全相同的采样网格。

    19010

    TensorFlow 图形学入门

    近年来,可嵌入到神经网络结构中的新型可微的图形层不断出现。从空间转换器到可微的图形渲染器,这些新层利用多年计算机视觉和图形研究中获得的知识来构建新的、更高效的网络架构。...在较高的层次上,计算机图形管道需要三维对象及其在场景中的绝对位置、构成它们的材料的描述、灯光和摄像机。然后,渲染器解释这个场景描述,生成一个合成渲染。 ?...在这个Colab示例中,我们展示了如何在一个神经网络中训练旋转形式,该神经网络既训练预测观察对象的旋转,也训练其平移。这项任务是许多应用程序的核心,包括专注于与环境交互的机器人。...材料 材料模型定义了光线如何与物体交互,从而赋予它们独特的外观。例如,有些材料,如石膏,能均匀地向四面八方反射光线,而有些材料,如镜子,则纯粹是镜面。...TensorFlow Graphics带有两个3D卷积层和一个3D池化层,例如,允许网络训练对网格执行语义部分分类,如下图所示,并在这个Colab笔记本中演示。 ?

    1.3K10

    目录

    你还可以从该示例中看到,Text窗口小部件中的每一行都在末尾包含换行符,包括文本框中的最后一行文本。 .delete()用于从文本框中删除字符。它的工作就像.delete()对Entry小部件。...例如,要删除"ello"文本框第一行中的其余内容,请使用索引"1.0"和"1.4": text_box.delete("1.0", "1.4") 请注意,文本已从第一行删除。...欲了解更多信息,请查看网格几何管理器部分的的TkDocs教程。 既然你已经掌握了Python GUI框架Tkinter的几何图形管理器基础知识,那么下一步就是为按钮分配操作以使你的应用程序栩栩如生。...每当按下按钮时,都会执行该功能。 看一个例子。首先,你将创建一个带有Label包含数值的窗口小部件的窗口。你将在标签的左侧和右侧放置按钮。左按钮将用于减小中的值,右按钮将Label增大该值。...从左按钮开始。按下此按钮时,应该将标签中的值减小1。要执行此操作,需要知道两件事: 你如何在中获取文字Label? 如何更新中的文字Label?

    29.8K20

    5、Java Swing布局管理器(FlowLayout、BorderLayout、CardLayout、BoxLayout、GirdBagLayout 和 GirdLayout)

    5.7、TableLayout       这种管理器把容器划分为行和列,就像是电子表格中的单元格。Tablelayouot把行和列交叉的每一个格子称为基本的单元格(cell)。...组件被添加到容器划分好的单元格中。当容器发生改变(伸缩)时,单元格也随之伸缩,装载在单元格里的组件也相应的会进行伸缩。       以下图为例:此容器被分为4行5列。...由图可看出,每一列的宽度并不是固定的,也不是平均宽度的。同理每一行的高度也不是均分的,可以按照实际情况进行分配列的宽度和行的高度。组件可以放在容易的一个cell单元格中,也可以占几个单元格。...在单元格中,行和列都是从0开始计数。Row0表示第1行,col0表示第1列。 ?      ...size[0]中存放的是列的宽度,size[1]中存放的是行的高度;数组中的整数表示该单元格的宽度或高度为多少像素,小数表示该单元格的宽度或高度为剩余空间的百分之多少,TableLayout.FILL表示将剩余的空间填满

    6.2K00
    领券