前言

公司有一個項目在維護，大概有300左右，其中表單與表格的頁面占比大概百分之五六十，為了節省開發時間，避免多人協作時，出現多套冗余代碼，我們嘗試寫了一下表單和表格的生成工具，從梳理到規范學習再到總結，收獲很多，寫一下筆記與大家分享。

表單生成，使用Express mongoDB jquery編寫

1. 表格生成

2. 表格預覽

表格生成預覽

1. 選擇生成組件

2. 編輯組件數據

3. 表格編輯

4. 預覽頁面

下文僅對表格生成工具的規范梳理和工具開發做介紹。

現有頁面梳理

把所有頁面涉及到表格的頁面全部截圖110個，然后再查找規則，大致分為5種類型頁面。

• 常規操作：56個
• 批量操作：11個
• TAB樣式：4個
• 特殊樣式：30個

常規頁面

批量操作

TAB樣式

特殊樣式

根據樣式粗略的分類，查詢條件有一丁點規則，會根據字段內容自己換行，并沒有發現可復用規則。

感覺遇到瓶頸，于是開始學習表格的設計規范。

表格設計規范學習

以下鏈接是表格設計規范的學習資料。

• 設計更好的數據表格設計 (Data Table)
• 數據表格設計｜從功能、交互和 UI 進行全方位分析
• Web 頁面中的表格設計，遠沒那么簡單
• 數據表格設計指南
• 數據表的用戶界面最佳設計：設計結構、交互模式、技術列表淺析

收獲知識點如下，學習完表格設計規范后，知道了如何根據自己的業務場景選擇UI框架和組件，也發現一些框架的瑕疵，比如數字類型有小數點，要保持小數點位數一致，右側對齊，在Element框架文檔中就存在這個問題，當然，并不是雞蛋里挑骨頭，可能由于時間或者其他因素沒有完善。

• 表格對字體的要求
• 標題與對齊規則
• 7±2定律
• 篩選與搜索
• 批量操作與記錄所選項
• 反饋
• 長內容展示
• 空單元格處理
• 分割線的使用
• 實時篩選與交叉篩選
• 判斷是否使用固定列表
• 橫向對比與豎向對比
• 全選案例
• 篩選勾選
• 批量操作與單項操作
• 頂部批量操
• 懸停操作
• 行內編輯
• 快速瀏覽

很多知識點在UI框架中有應用，參見幾個框架的表格規范。

• Ant Design 表格
• Element UI 表格
• iView 表格

根據業務總結規范

對規范有了認識，按照原子設計概念，劃分粒度較小的組件。

tomic Design原子設計理念：構建科學規范的設計系統

• 標題組件

• TAB組件

• 上傳下載組件

• 詳情展示組件

• 查詢條件組件

• 提示文字組件

• 表格組件

• 分頁組件

• 提交按鈕組件

按照思路整理以后，發現我們的UI設計也應用了很多交互規范，比如根據場景區分復雜分頁與簡單分頁、批量操作與單項操作、行內編輯與提交編輯等，當然，也有很多不規范的地方，比如上傳下載不統一、TAB樣式多個、詳情展示樣式多個。

標題樣式與TAB樣式，按鈕樣式

上傳下載樣式

起止日期與選項標題

根據組件分類并整理出每個組件的不同狀態后，和需求設計組的老大一塊討論，是否可以根據現有場景做一些優化和規則制定，結果很令人滿意，初步組件規則協定好，去掉不規范的交互效果，需求設計組聲明以后也會按照規則產出原型。

規則制定好后，犯懶的想法愈發嚴重，何不開發一個自動生成工具，能保證代碼質量和規范，效率也更高。

頁面生成工具開發

以前編寫的表單生成工具嘗到了一些甜頭，有一些積累和總結，基于上次的經驗，我們開始了本次的工作內容劃分。

1. 技術選型 上次使用jquery開發，需要在DOM和數據間來回操作，很麻煩，這次準備用vue開發，效率很高，2個人幾天就完成了，雖然僅僅是初版，另外使用表單生產工具之前，都要搭建node MongoDB的環境，很不方便，我們暫時不打算存儲頁面數據，去掉服務端和數據庫。

2. 數據結構定義 要保證每個組件的數據和類型有地方存儲，以及未來擴展和維護的成本。

export const TABLE_JSON = {"title": "保障層級變更", //標題數據"tab": ['保單','會交單'], //tab數據"download":[ //上傳下載操作{label:'上傳清單人員模板',buttonText:'點擊下載'},{label:'批量修改模板',buttonText:'點擊下載'},{label:'導入修改信息',buttonText:'導入'},{label:'批量導入',buttonText:'導入'}],"search": [ //查詢條件{label:'團體保單號',dataType:'input',isRequired:true,placeholder:'請輸入',value:''},{label:'證件類型',dataType:'select',isRequired:false,placeholder:'請選擇',value:['軍官證','身份證','居住證']},{label:'統計日期',dataType:'date',isRequired:false,placeholder:'請選擇',value:'2015-10-11'},{label:'起止日期',dataType:'StartToEnd',isRequired:false,placeholder:['選擇開始日期','選擇結束如期'],value:['2017-02-11','2017-10-11']},{dataType:'button',value:'查詢'},{dataType:'button',value:'重置'}],"info": [ //詳情展示{label:'投保單位名稱',val:'東風汽車有限公司'},{label:'團體保單號',val:'88681433942'},{label:'保險期間',val:'自2014-07-29 零時起 至 2015-07-28 二十四時 止'},{label:'保單狀態',val:'承保'},{label:'總賠付金額',val:'1000元'},{label:'總賠付人數空',val:'10'}],"note": {val:'注：查詢案件狀態為回退修改時，請按照回退意見補充或修改申請材料后再提交，時效以最終同意受理日開始計算。',type:'normal'}, //提醒文字 類型：normal,warning,danger"table": [ //表格數據// {// "type": 1,// "thead": [],// "tbody": []// }{"type": 1,"thead": ['t1','t2','t3'],"tbody": [[{"type": 1,"icon": "","nodes": ['c1']},{"type": 2,"icon": "","nodes": ['c2']},{"type": 1,"icon": "","nodes": ['c3']}]]},{"type": 2,"thead": ['d1','d2','d3'],"tbody": [[{"type": 1,"icon": "","nodes": ['a1']},{"type": 2,"icon": "","nodes": ['a2']},{"type": 1,"icon": "","nodes": ['a3']}]]}],"pagination": {type:'simple'}, //分頁以及類型"button": [ //按鈕與類型{type:'dafult',buttonText:'上一步'},{type:'warning',buttonText:'確認加入'},{type:'primary',buttonText:'返回'},{type:'info',buttonText:'上一步'}] }

3. 功能拆分 實現的思路是父組件存儲所有數據，展示元素引用子組件，每個組件除展示外，要配套一個彈框來修改數據，點擊確定后將數據提交給父組件，這樣團隊也可以多人開發，父組件只是負責存儲和展示數據，靈活度高。

目錄結構圖，pages內放置要的主編輯頁面，base內方放置子組件。

例：提示組件代碼與預覽

<template> <div v-show="getjson != ''"><h3>提示信息內容編輯</h3><!-- 表格顯示部分 --><div style="font-family:'新宋體'; font-size:12px; margin:0px 29px; height:30px;line-height:30px;padding:10px 0px; color: #666; ">{{getjson.val}}</div><!-- 操作按鈕 --><div class="controlbox"><el-button type="primary" icon="el-icon-edit" circle @click="msgBoxShow = true"></el-button><el-button type="danger" icon="el-icon-delete" @click="deleteSelf" circle></el-button></div><!-- 彈窗 --><el-dialog title="提示信息內容編輯" :visible.sync="msgBoxShow" center :show-close='false'><el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="請輸入內容"v-model="getjson.val"></el-input><el-select v-model="getjson.type" placeholder="請選擇"><el-optionv-for="item in noteType":key="item.type":label="item.name":value="item.type"></el-option></el-select><div slot="footer" class="dialog-footer"><el-button @click="msgBoxShow = false">取 消</el-button><el-button type="primary" @click="commit">確 定</el-button></div></el-dialog></div> </template> <script>export default {name:"msgBox",props:['noteData'],data() {return {getjson:this.noteData,msgBoxShow: false,noteType:[{type:'normal',name:'灰色：普通消息'},{type:'warning',name:'橙色：次重要消息'},{type:'danger',name:'紅色：重要消息'}],formLabelWidth: '120px',};},methods:{commit() {this.msgBoxShow = false;this.$emit('noteConfig', this.getjson)},deleteSelf(){this.getjson='';this.$emit('noteConfig', this.getjson)}}} </script>

4. 功能流程確定

選擇要展示組件

確定表格類型

編輯各個組件數據

預覽

導出html文件（暫未制作）

總結

在表單和表格的生成工具開發過程中，我們都是先實現功能，然后再反過來整理頁面的sass文件，像字段最長最短個數影響展示樣式這樣的問題都是等功能都實現了才發現有問題，導致返工和修改，后續開發順序最好如下：

視覺規范整理

組件狀態與字段規則整理

html scss組件、頁面測試 組件文檔編寫

開發頁面生成工具

啟發與后續

目前頁面很丑，功能上也有很多bug，但是思路是可行的，而且開發難度也不是很高，效率與質量有保證，后續希望使用Node mongoDB Vue全棧開發出常用頁面類型生成工具，借鑒資料百度FEX的吳多益大神的PPT，不過百度的產品并沒有開源，商業化了，

Ant Design框架頁面是按照 功能=>模板=>組件 來劃分的，

具體實現思路還要整理清晰，以方便展開下步工作，如果你愿意和我們一起完成，或者有更好的思路，歡迎一起討論.

奔3了，時日不多，要加緊努力了。

才疏學淺，如有問題懇請斧正。

總結

以上是生活随笔為你收集整理的记表格设计规范整理与页面可视化生成工具开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。