[發明專利]一種基于Vue和Element UI的表格生成和操作方法及系統

在審

• 申請號: 202110009571.1
• 申請日: 2021-01-05
• 公開（公告）號: CN112699652A
• 公開（公告）日: 2021-04-23
• 發明（設計）人: 王小普
• 申請（專利權）人: 銀盛通信有限公司
• 主分類號: G06F40/18
• 分類號: G06F40/18;G06F40/174;G06F21/60;G06F16/2455
• 代理公司: 深圳市深可信專利代理有限公司 44599
• 代理人: 彭光榮

本發明實施例提供一種基于Vue和Element UI的表格生成和操作方法，其特征在于，包括以下步驟：步驟一：通過向服務器發送HTTP請求，傳遞表格特定的參數以及用戶信息；步驟二：根據用戶的權限以及表格的特定參數，查找表格信息并返回至頁面；步驟三：前端將接收的表格信息對表格進行渲染；步驟四：基于向服務器傳遞的用戶信息和表格特定的參數，查找用戶的數據操作權限，并返回至頁面；步驟五：頁面根據傳遞的數據格式和數據操作權限，生成不同的數據表列從而生成數據表格；本發明實施例便于提高Element UI中表格快速生成的效率以及提高代碼的可復用性，減輕代碼維護的成本，同時縮小打包后文件的大小，提高頁面的加載速度。

技術領域

本發明涉及計算機技術領域,更具體地說，涉及到一種基于Vue和Element UI的表格生成和操作方法及系統。

背景技術

表格代碼重復性很高，書寫過于繁瑣和累贅，造成人員時間和精力的浪費。多個頁面會使用一樣的表格，維護成本過高。表格翻頁，修改數據長度和頁碼跳轉是常用功能，表格沒有自動配置該功能。

本發明內容

為了克服現有技術的不足，本發明提供一種基于Vue和Element UI的表格生成和操作方法用來解決Element UI中表格生成效率低下以及頁面加載速度慢的技術問題。

本發明解決其技術問題所采用的技術方案是：提供一種基于Vue和Element UI的表格生成和操作方法，包括以下步驟：

步驟一：通過向服務器發送HTTP請求，傳遞表格特定的參數以及用戶信息；

步驟二：根據用戶的權限以及表格的特定參數，查找表格信息并返回至頁面；

步驟三：前端將接收的表格信息對表格進行渲染；

步驟四：基于向服務器傳遞的用戶信息和表格特定的參數，查找用戶的數據操作權限，并返回至頁面；

步驟五：頁面根據傳遞的數據格式和數據操作權限，生成不同的數據表列從而生成數據表格。

優選地，通過向服務器發送HTTP請求，傳遞表格特定的參數以及用戶信息之后，根據用戶的權限以及表格的特定參數，查找表格信息并返回至頁面之前，所述步驟還包括：

服務器接收從頁面傳遞的表格特定的參數以及用戶信息。

具體地，根據用戶的權限以及表格的特定參數，查找表格信息并返回至頁面，所述步驟包括：

根據用戶的權限以及表格的特定參數，查找表格表頭信息列表、表頭列對應的數據字段、數據的具體操作權限以及數據顯示的格式。

優選地，根據用戶的權限以及表格的特定參數，查找表格信息并返回至頁面之后，前端將接收的表格信息對表格進行渲染之前，所述步驟還包括：

頁面接收服務器返回的數據，返回的數據包括表頭列數據的名稱、列對應的數據字段以及多級表頭。

具體地，前端將接收的表格信息對表格進行渲染，所述步驟包括：

前端循環遍歷數組，同時頁面根據表格自定義的參數在頁面顯示出表格的表頭列表。

具體地，頁面根據表格自定義的參數在頁面顯示出表格的表頭列表，所述步驟包括：

頁面根據表格自定義的參數展示出符合設計要求的表格樣式，包括數據的篩選、下拉、數據的樣式、數據顯示的格式、表格的滾動以及行和列的合并。

優選地，基于向服務器傳遞的用戶信息和表格特定的參數，查找用戶的數據操作權限，并返回至頁面之后，頁面根據傳遞的數據格式和數據操作權限，生成不同的數據表列從而生成數據表格之前，所述步驟還包括：