[发明专利]基于vue.js的表格编辑方法、装置、设备及介质

说明书

本发明涉及大数据领域，提供一种基于vue.js的表格编辑方法、装置、设备及介质，能够根据配置文件从表格数据中识别待编辑数组，利用vue.js框架中的渲染函数进行渲染，得到虚拟表格及每个单元格的标识，将原有的HTML结构转化为虚拟的数据结构，更加清晰易读，便于操作，当目标单元格有点击事件时，将属性切换为可编辑状态，并基于配置组件中的输入组件显示目标单元格中的数据，进一步结合对应的组件及事件的监听实现对数据编辑属性的切换，无需调用后端服务器的接口即可直接在前端进行数据的编辑，有效提升了编辑效率，且避免多次向后台传递数据给系统造成运行负担。此外，本发明还涉及区块链技术，虚拟表格可存储于区块链节点中。

技术领域

本发明涉及大数据技术领域，尤其涉及一种基于vue.js的表格编辑方法、装置、设备及介质。

背景技术

表格，又称为表，既是一种可视化交流模式，又是一种组织整理数据的手段，在通讯交流、科学研究以及数据分析等任务场景中被广泛使用。

但是，目前的UI(User Interface，用户界面)框架功能都比较单一，且大多数不可编辑。要想实现在页面表格进行编辑的功能，还需要与后台进行数据交换，频繁的调用后台接口，不仅容易出错，且效率较低，不便于修改。

发明内容

鉴于以上内容，有必要提供一种基于vue.js的表格编辑方法、装置、设备及介质，旨在解决页面中表格编辑的问题。

一种基于vue.js的表格编辑方法，所述基于vue.js的表格编辑方法包括：

获取表格数据及配置文件，并根据所述配置文件从所述表格数据中识别待编辑数组；

调用vue.js框架中的渲染函数，并利用所述渲染函数对所述待编辑数组进行渲染，得到虚拟表格及所述虚拟表格中每个单元格的标识；

根据每个单元格的标识向所述虚拟表格添加配置事件及配置组件；

监听每个单元格的所述配置事件；

当监听到有单元格的所述配置事件为点击事件时，将监听到的单元格确定为目标单元格；

将所述目标单元格的属性切换为可编辑状态，并基于所述配置组件中的输入组件显示所述目标单元格中的数据。

根据本发明优选实施例，所述根据所述配置文件从所述表格数据中识别待编辑数组包括：

获取所述表格数据的每个框格中数据的类别属性，并作为第一属性；

从所述配置文件中获取预先配置的可编辑的数据的类别属性，并作为第二属性；

当检测到有框格中数据的所述第一属性与所述第二属性相同时，组合检测到的数据，得到所述待编辑数组。

根据本发明优选实施例，所述利用所述渲染函数对所述待编辑数组进行渲染，得到虚拟表格及所述虚拟表格中每个单元格的标识包括：

保留所述待编辑数组的具名插槽，得到所述虚拟表格；

采用获取函数获取所述虚拟表格中的每个单元格；

利用映射函数循环遍历每个单元格，并为遍历到的每个单元格添加标识，得到所述虚拟表格中每个单元格的标识。

根据本发明优选实施例，所述根据每个单元格的标识向所述虚拟表格添加配置事件及配置组件包括：

获取每个单元格对应的所述具名插槽；

根据每个单元格的标识向每个单元格对应的所述具名插槽中插入所述配置组件；

在每个具名插槽中绑定所述配置组件及所述配置事件。

根据本发明优选实施例，所述配置组件还包括行内标签组件，所述方法还包括：