[发明专利]基于Vue+Element-UI的el-table的二次封装方法、系统及电子设备

说明书

本发明公开一种基于Vue+Element‑UI的el‑table的二次封装方法、系统及电子设备。所述基于Vue+Element‑UI的el‑table的二次封装方法包括：在本地项目开发环境中安装node开发平台、webpack静态模块打包器以及vue‑cli，以用于构建本地项目，在所述本地项目中下载Element‑UI库，并在本地项目中引入Element‑UI库，在所述本地项目的main.js文件中引入并注册组件信息，在所述本地项目中引入gird.js组件，在需要展示表格操作的内容中调用所述gird.js组件。本发明能够将项目中的el‑table的调用简化，大大减少了代码量，而且本发明具有高度可继承和复用性。

技术领域

本发明涉及软件开发技术领域，特别是涉及一种基于Vue+Element-UI的el-table的二次封装方法、系统及电子设备。

背景技术

在工业大数据云平台中存在大量的报表类的数据展示页面，需大量操作数据表格，为了避免开发过程中代码量的重复和冗余，故采用二次封装方法简化了el-table的复杂调用过程。

现有技术中的el-table的封装方法需要调用大量的代码量，而且不具备高度可继承和复用性，因为迫切需要改进。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种基于Vue+Element-UI的el-table的二次封装方法、系统及电子设备，用于解决现有技术中的el-table的封装方法需要调用大量的代码量，而且不具备高度可继承和复用性的问题。

为实现上述目的及其他相关目的，本发明提供一种基于Vue+Element-UI的el-table的二次封装方法，包括：

在本地项目开发环境中安装node开发平台、webpack静态模块打包器以及vue-cli，以用于构建本地项目；

在所述本地项目中下载Element-UI库，并在本地项目中引入Element-UI库；

在所述本地项目的main.js文件中引入并注册组件信息；

在所述本地项目中引入gird.js组件；

在需要展示表格操作的内容中调用所述gird.js组件。

在本发明的一实施例中，所述本地项目的main.js文件用于实例化Vue，引入所述本地项目中需要的插件和CSS样式，以及存储全局变量。

在本发明的一实施例中，通过业务模块页面在需要展示表格操作的内容中调用所述gird.js组件。

在本发明的一实施例中，所述表格操作的内容的载体包括gird.js组件动态渲染到网页上。

在本发明的一实施例中，所述本地项目包括根据实际业务开发的具体的前端项目。

在本发明的一实施例中，所述本地项目的main.js文件为所述本地项目的项目名称的主入口文件。

在本发明的一实施例中，所述组件信息包括Vue组件、Axios组件、ElementUI组件。

本发明还提供一种基于Vue+Element-UI的el-table的二次封装系统，包括：

本地项目构建模块，用于在本地项目开发环境中安装node开发平台、webpack静态模块打包器以及vue-cli，以用于构建本地项目；

Element-UI库下载模块，用于在所述本地项目中下载Element-UI库，并在本地项目中引入Element-UI库；

组件信息注册模块，用于在所述本地项目的main.js文件中引入并注册组件信息；