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

20 多个好用的 Vue 组件库

/handsontable/tree/master/wrappers/vue Handsontable 是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。...支持对加载后的表格页面的处理:添加/删除/,合并单元格等操作。 此外,它还适用于 React、Angular 和 Vue。...特点如下: 多排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏/ 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid.../ag-grid Ag-Grid 是一个基于 Vue.js 的数据表格组件。...它有几个特性: 表搜索和排序 过滤和分页 复选框表格 分组 样式 多选 Notification Vue Toastification 地址:https://github.com/Maronato

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

基于 Angular Material 的 Data Grid 设计实现

column hiding(显示隐藏) checkbox selection(数据选择) row selection(选取,可多选) cell selection(单元格选取,暂时支持单选) expandable...row(可展开的表格) customized cell(自定义单元格) column moving(的移动排序) Data Formatting(数据格式化) Template(各种模板) 因文章篇幅有限...设置不可选取的方式有两种,一种是设置 checkbox 为 disabled,另一种是隐藏 checkbox。配置非常简单,只需要通过 rowSelectionFormatter 过滤数据即可。...showExpand, 确定在哪个显示展开符号。...官网示例:Column hiding & moving 显示隐藏以及排序是非常常见的需求,这类需求曾被产品经理折磨了无数次。

5K20

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

.. handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。...同时,支持对加载后的表格页面的处理:添加/删除/,合并单元格等操作。 此外,它还适用于React、Angular和Vue。...特点 多排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏/ 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid/...它有几个特性: 表搜索和排序 过滤和分页 复选框表格 分组 样式 多选 Vue Toastification 地址:https://github.com/Maronato/v......EpicSpinners是一易于使用的纯css打造的网页Loading效果,并且同时整合了Vue组件可以方便的在Vue项目中进行使用,由于是纯css打造,你可以在任意网页项目中自行整合并使用!

7.3K10

我是如何爱上ag-grid框架的

与每个管理系统一样,我们需要选择一个网格来显示我们的数据,而我的前任已经在应用程序中使用了两个网格 -  ag-Grid(v2.7)和Ng-Table(v0.8.3) - 我热情地讨厌前者。...我及时检查了源代码,发现ag-Grid有一个column定义字段,其中包含我真正需要的所有内容。这伴随着排序,过滤,固定和最重要的 - 分组,聚合以及拥有所需数量的的能力。...我是一个非常自豪的开发人员,所以很难接受我错了,但是当我最终接受它时,由于ag-Grid,我的生活变得如此简单。 旅程 我只是无法停止使用它。我用这个网格做了很多事情。...我添加了视图,因此您可以多次在同一网格上工作,但每个网格都有不同的自定义外观,有一次我将客户端的数据库转储给用户(大约150K和150个属性)和创建了自定义报告生成器。...每个新页面至少有一个表,添加/编辑/删除,我只是通过布尔的开关以编程方式控制。生活很棒,我不能完全感谢这个网格。

6.1K40

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

除了这6种批量的变形操作,还可以对某一某一进行单独操作,比如在侧边栏可以过滤隐藏,表头位置可以排序,手动调整列宽和顺序,手动折叠/展开索引等。...2种关系型操作可以用图4.5来简单理解:filter是“过滤”,project是“过滤”。 ? 图4.5:2种使用到的关系的api请求范围 对象增删改查有关的模块包括增删改查模块,数据过滤模块。...当主键单击某一,都会打印这一所对应的内存对象,方便debug。 6.允许排序。排序的作用不言而喻,尤其是对索引的排序至关重要。 7.允许搜索。允许在某一当中通过关键字搜索某一。...本系统初始化表格的时候是通过每个人----每个项目的形式遍历的,及总行数(不包含group的)为人数*项目数,然后默认将demand为空的那些隐藏起来,这样做的目的是既照顾到所有的资源又可以自动屏蔽不需要的数据...不过debug locally的应用场景并不多,主要适合一些极端用户的个性需求,比如调整界面的主题颜色,自动隐藏不想看到的表格等等。

1.1K20

基于web的项目资源分配系统

除了这6种批量的变形操作,还可以对某一某一进行单独操作,比如在侧边栏可以过滤隐藏,表头位置可以排序,手动调整列宽和顺序,手动折叠/展开索引等。...2种关系型操作可以用图4.5来简单理解:filter是“过滤”,project是“过滤”。 图4.5:2种使用到的关系的api请求范围 对象增删改查有关的模块包括增删改查模块,数据过滤模块。...当主键单击某一,都会打印这一所对应的内存对象,方便debug。 6.允许排序。排序的作用不言而喻,尤其是对索引的排序至关重要。 7.允许搜索。允许在某一当中通过关键字搜索某一。...本系统初始化表格的时候是通过每个人----每个项目的形式遍历的,及总行数(不包含group的)为人数*项目数,然后默认将demand为空的那些隐藏起来,这样做的目的是既照顾到所有的资源又可以自动屏蔽不需要的数据...不过debug locally的应用场景并不多,主要适合一些极端用户的个性需求,比如调整界面的主题颜色,自动隐藏不想看到的表格等等。

4.4K70

Linux 命令(74)—— top 命令

C 在第六显示隐藏任务区坐标(Coordinates)原点位于第 x ,第 y l 显示隐藏系统启动时间信息和平均负载(Load-Average/Uptime)。...即显示隐藏第一 t 显示隐藏任务与 CPU 信息(Task/Cpu-States),即第二和第三 m 显示隐藏内存信息(Memory/Swap-Usage),即第四和第五 1 显示隐藏每个...CPU 核心的使用信息,即影响第三 CPU 信息显示方式 2 显示隐藏 NUMA 节点信息 3 显示隐藏 NUMA 节点信息,需要手动输入选择要展示的 NUMA 节点 (3)任务区命令(Task...比如将编号为 1 的当前字段的默认名称由 Def 改为 Fir。 ? 在 alternate display mode 视图下,连字符 - 或者下划线 _ 可以隐藏显示当前字段。...Home 跳转到当前字段任务区的第一 End 跳转到当前字段任务区的最后一 C 在第六显示隐藏任务区坐标(Coordinates)原点位于第 x ,第 y 6.4 在窗口内搜索

5.8K20

12.1版本中的全新数据交互控制和格式选项功能

隐藏显示项目也在所有Dataset单元格的上下文菜单中,用于特定数据分解某部分的聚焦视图: ? 所有选项 排序和隐藏是你研究数据的可交互工具。...想要默认隐藏所有项目并显示单个项目,可使用 All 来隐藏所有项目,然后使用 path→False 制造异常状况: ? 使用path→True可对异常状况进一步制造异常,隐藏那些显示的项目: ?...但在12.1中,MaxItems 选项让你可以控制显示的数量,并可以对更深层的内容进行控制。比如,想要将显示的行数量限制在3,则指定MaxItems→3: ?...给出一个指定多个层级()的列表: ? 你可以在任意深度指定数量限制。在这个范例中,每个行星显示的卫星数量被限制在1个: ? ? DatasetDisplayPanel ?...在这个例子中,的颜色覆盖了的颜色,只有在的颜色为None时,才会显示的颜色: ? 你可以在任意层级指定值。想要在给定层级使用默认颜色,只需指定Automatic。

1.6K30

bootstrap快速入门笔记(二)-栅格系统,响应式类

一,栅格系统大致有以下: 1,row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一有12 2....“(column)”在水平方向创建一col,只有能作为的直接子元素.row .col-xs-4   通过设置padding属性,通过为.row 元素设置负值 margin 从而抵消掉为 .container...为了克服这一问题,建议联合使用 .clearfix和响应式工具类 *如果在一个 .row 内包含的(column)大于12个,包含多余(column)的元素将作为一个整体单元被另起一排列。...四,响应式工具类 通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏显示页面内容。...打印类 和常规的响应式类一样,使用下面的类可以针对打印机隐藏显示某些内容。

1.1K30

Power BI 计算理解(一)

如果不使用外部工具,实现上述功能一般有两种做法: (1)使用书签功能,通过书签+按钮控制多个视觉对象的显示隐藏,设置相对比较麻烦。...但有一个问题,该度量值的显示格式只能设置为单一样式(如利润率想设置为百分比,其他设置为逗号分隔的整数样式),如果使用DAX中format函数分别指定样式,其结果又变成了文本,无法参与后续计算,在视觉对象中呈现会有许多限制...计算的定义需要使用外部工具Tabular Editor,使用TabularEditor创建计算后,模型中就多了一个表格,该表格有两:一是Name(可以重命名),别一列名为Ordinal,用来设置排序...并将收入计算项定义为度量值 [收入]、利润计算项定义为度量值[利润]、利润率计算项定义为度量值[利润率] 上表中每一对应一个计算项,每一个计算项可以定义值及值显示格式,与使用辅助表类似,也需要将上述的...如表1中的度量值虽然是通过辅助表与DAX重写了,但是由于计算表[Name]中的“收入”是选定状态,在交互筛选的作用下,表1表2中的度量值都会传入计算,然后返回收入计算项定义的值(表达式),也就是显示

2.3K20

Linux创建、编辑文件、目录管理、文件解压及删除命令整理总汇

切换工作目录到当前目录的上一级目录 cd /usr/local 切换工作目录到/usr/local ls 显示目录与文件信息 常用选项: -a 显示所有文件,包括以.开头的隐藏文件 -h 人性化显示容量信息...,空白显示行号 -n 显示行号,包含空白 示例: [root@moli_linux1 ~]$ cat -b hello.txt       1    one:hello world           ...选项: -c nK 显示文件前nKB的内容 -n 显示文件前n行内容 示例:head -5 /etc/passwd 显示/etc/passwd文件前5内容。...tail 查看文件尾部内容,默认显示末尾10。...格式:chown [选项] [所有者]:[所属] 文件名/目录名 选项:-R 递归将权限应用于所有子目录与子文件 使用ls -l命令查看文件或目录的时候,第三和第四就是文件或目录的所有者与所属

3.5K20

Bootstrap 响应式框架 第三集

class(xs/sm/md/lg),可以兼容更大的屏幕 小屏幕的class 可以兼容大屏幕的显示效果 col-xs-6 : 在 xs 屏幕下,占6的宽...大屏幕的内容class是不能兼容小屏幕的,所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的(纵向排列) 3、可以在一个(div)中,指定在不同屏幕下的宽度占比 在xs中占12的宽(一中只显示) 在sm中占6的宽(1中能显示2)...在md中占3的宽(1中能显示4) 4、指定在特定屏幕下隐藏 .hidden-lg : 在 lg 屏幕下隐藏 .hidden-md : 在 md 屏幕下隐藏...lable(文本)要放在一个表单控件中(.form-group) 表单控件中允许包含以下内容: 1、label :标签文本 2、input :表单控件元素

3.9K30

Excel VBA高级筛选技巧

在这个示例中,表跨越了A至G,我们定义的筛选的区域如下: Range(“A:G”).AdvancedFilter 条件区域 AdvancedFilter方法可以接受一筛选条件。...第I和第J显示了新表,如下图2所示。 图2 不需要包含每个标题,也不必为表中的每个标题指定条件。示例数据区域有7个字段,而条件区域表只有City和Amount,甚至没有为后者输入限制条件。...,这里仍然没有定义Action参数,因此这个宏仍然无法工作。...使用xlFilterInPlace XlFilterInPlace操作通过直接在表中隐藏来筛选整个数据区域,将在输出中获得所有字段。...图6 不符合条件的现在被隐藏,这是一种非常快速的筛选方法,但它的缺点是可能会将重要隐藏在主表之外。

6.9K50

div构建table

用该值为对象之后添加新 none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。...用该值将从对象中删除 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。...并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell...:将对象作为表格单元格显示 table-column :将对象作为表格显示 table-column-group :将对象作为表格显示 table-header-group :将对象作为表格标题显示...table-footer-group :将对象作为表格脚注显示 table-row :将对象作为表格显示 table-row-group :将对象作为表格显示 2、代码段如下 #main {

1K20

div构建table

用该值为对象之后添加新 none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。...用该值将从对象中删除 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。...并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell...:将对象作为表格单元格显示 table-column :将对象作为表格显示 table-column-group :将对象作为表格显示 table-header-group :将对象作为表格标题显示...table-footer-group :将对象作为表格脚注显示 table-row :将对象作为表格显示 table-row-group :将对象作为表格显示 2、代码段如下 #main {

1.2K30

Linux的常用指令 和 基础知识穿插巩固(巩固知识必看)

"开头的git隐藏文件,若你不显示隐藏文件,则这个文件你查看不到) 隐藏文件的作用 ​ 1....文件拥有者: 显示文件的拥有者用户名。 文件所属显示文件所属的用户名称。...这个存在的意义是:有时为了保护文件所属者的信息,文件只有自己可见,但这样子会有弊端:当文件所有者的同事或者上级想查看文件时,无法查看,只能打开other查看的权限,但是这样子所有人都可以看,而不只是上级和同事...----该进程的PID [解释]:*ps axj:显示进程的详细信息 *head -1:显示头部(显示每一代表的 含义){注意不是kill -l(字母l),而是数字...wc -L “文件名” 显示文件 filename 中最长的长度

3300
领券