一款仿 Excel效果的表格插件！-Handsontable

最近在做一个关于报表管理的项目，发现了一款很好用的jQuery插件-Handsontable。它真的特别给力，在 Excel 中可进行的操作，你几乎都可以在网页中做到，如拖动复制、Ctrl+C 、Ctrl+V 、编辑等等。另外在浏览器支持方面，它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera。

Handsontable简介

Handsontable 是一个 JavaScript/HTML5 数据网格组件，具有独立于任何外部框架的电子表格外观。可以使用自定义插件轻松修改或扩展它。它还使用 JSON 格式绑定到任何源，并且能够处理大量数据。您可以轻松执行数据绑定、数据验证、过滤、排序和 CRUD 操作，并为最终用户提供类似 Excel 的体验。Handsontable 带有用于大多数流行框架的包装器和指令，例如 Angular、React 和 Vue。该组件支持多种语言，包括中文、日文、德文、西班牙文、法文、葡萄牙文、波兰文和俄文。

Handsontable主要功能

条件格式- 根据其值定义特定单元格的格式。

上下文菜单- 调用快捷菜单以选择与所选对象相关的操作。

自定义边框- 在单元格或单元格范围周围应用自定义边框样式。

自定义按钮- 使用自定义操作按钮插入和删除列或行。

自定义单元格类型 - 使用 Handsontable 本身作为自定义单元格编辑器。

自定义 HTML - 在单元格或标题中显示 HTML 内容。

数据验证- 控制可以将哪些值输入到单元格中。

对齐- 确定内容在单元格或单元格范围内的放置位置。

自动完成- 在键入或输入自定义值时选择建议的选项之一。

将行与标题绑定 - 将行与标题绑定以锁定行号并始终在另一个旁边显示一个。

复选框- 向单元格添加复选框以指示二元选择。

折叠列- 展开和折叠列以更好地适应内容。

列摘要- 进行预定义的计算并在 Handsontable 中显示结果。

注释- 提供有关单元格的附加注释，以帮助更好地理解其内容。

日期- 使用日期选择器选择日期。

禁用单元格编辑- 在不更改其外观和行为的情况下使单元格不可编辑。

向下拖动 - 拖动填充手柄(单元格右下角的一个正方形)以使用数据系列填充单元格。

下拉菜单 - 在单元格中创建高级选项下拉列表。

下拉菜单- 向标题添加菜单以启用列的其他操作。

导出到文件- 将数据导出到 CSV 或字符串等平面文件。

过滤- 显示符合条件的行并隐藏其余行。

固定行和列- 定义在向下或跨表格滚动时哪些行或列可见。

冻结- 创建冻结列以在滚动时保持它们可见。

标题工具提示- 在工具提示中显示标题标签。

隐藏列- 隐藏特定列并显示其余列。

隐藏行- 隐藏特定行并显示其余行。

突出显示当前- 指示整个活动列或行。

国际化 - 更改 UI 的文本以便将其翻译成特定语言。

合并单元格- 跨多行或多列显示单元格。

移动- 拖动行或列以在表格中交换它们。

嵌套标题- 创建标题的嵌套层次结构，以将您的数据分组。

数字- 在单元格中键入自定义数字格式。

分页- 限制在单个视图中显示的记录数。

密码- 使用星号屏蔽单元格中的值。

预填充新行- 创建具有预定义类型或值的空单元格

只读- 锁定单元格或单元格范围以禁止更改它们。

使用步骤

OpenVoice 使用特点：

安装(个人建议安装12.2及之后的版本)

npm install handsontable @handsontable/vue

使用

import { HotTable } from '@handsontable/vue' <hot-table :settings="hotSettings" class="w-100 h-100"></hot-table>

hotSettings里面配置需要的属性和回调函数

源码口令：Handsontable