表格對于背景管理類的系統來說，至關重要，系統大多數功能都需要以表格的方式展示業務内容，系統開發人員多數時間也是圍繞着表格進行業務編碼，接觸過很多背景管理系統的架構，我個人第一首先也是看表格功能是否強大。
對于低代碼平台來說，也是非常核心的内容，關系到系統好不好用，功能能不能支撐各種業務場景的需求，是以也是至關重要的内容。
清單視圖後續會寫多篇文章來分解具體的功能設計，感興趣可以檢視前端相關代碼，這篇文章主要是講一下表格内容的使用配置，不涉及到查詢及各種進階控件的使用。
請參照開源網站的“表單正常示例->控件綜合應用”這個頁面體驗及對照檢視相關配置，這個頁面功能單一，但裡面的各種清單使用場景比較複雜，将所有平常開發常見的功能都內建到裡面了，并且是真正意義的零代碼，全部通過配置完成，前後端都沒有任何代碼，界面配置立馬生效。
配置頁面：
功能頁面：
基礎功能參見antd的表格使用
基礎功能參考antd的table控件，特殊功能如下：
- 點選“字元字段”打開編輯對話框（點選字段接入規則引擎，将選中的行資料作為事件參數傳入規則引擎，執行打開編輯視圖對話框、根據選擇行Id擷取後端資料、将資料綁定到編輯視圖）
- 日期、字典、電話等字段自定義顯示
- 外鍵字段格式化顯示（資料庫隻存儲外鍵Id）
- 人員字段格式化顯示（資料庫隻存儲人員外鍵）
- 表格按鈕權限控制
- 表頭分頁
- 是否換行顯示
- 自定義列顯示
- 多選行
- 表格擴充内容顯示
清單視圖屬性設定
屬性正常設定即為設定ant的table控件，其他一些擴充字段如下：
-
tableDiv
設定a-table外層的div樣式，預設樣式為：'min-height: 560px'
-
rowKey
前端表格的行主鍵，一般情況為"id"，可以不設定，當查詢出來的清單資料主鍵不為id時，需要設定，如：id_a
-
tableType
自定義擴充字段，多數情況不需要設定，如果是樹清單，需要設定為“tree”
-
columns
參見Table元件設定，定義表格列， 特殊處理（寬度width不設定，預設置為80；對齊align不設定，預設置為center，擴充linked屬性，辨別表格字段可以點選，點選事件可接入規則引擎；擴充option_is屬性，辨別字段列可自定義是否顯示；擴充option_selected屬性，配合option_is使用，辨別字段列預設是否顯示）
-
columnsExpanded columnsExpandedColSpan
columnsExpanded表格展開更多内容字段列定義，columnsExpandedColSpan定義展開顯示多少行，值為1-4，預設為4
-
colOperateWidth
定義清單操作列的寬度，當清單操作控件或者清單更多控件定義了，清單中的操作列才會顯示。
-
excelTemplate
導入導出Excel配置模版資訊，參見附錄【導入導出Excel模版】，如：[{"name":"電話","field":"phoneNumber","fieldType":5,"isRequred":true,"validateType":99,"validateValue":"[{'customerVal':'Phone','trigger':'blur'}]"},{"name":"學曆","field":"education","fieldType":5,"validateType":11}]
-
excelDicts
字段字典映射集合資料，表示Excel中用到的資料字典映射資訊，定義哪個字段用到哪個資料字典，如：[{"dict":"sex","field":"sex"},{"dict":"edu","field":"education"},{"dict":"title","field":"positionalTitle"}]
-
excelName
導入導出Excel檔案名稱，如：人員管理測試Excel資料
-
uniqKey
導入時唯一字段檢測（這裡的字段為資料庫字段，注意不是轉換為駝峰命名之後的字段，多個字段組合用;号隔開），如：UserName。
-
eval_query
執行後端方法擷取查詢參數後執行的JS腳本，自定義擴充處理查詢條件，本質上執行eval函數，特殊場景使用，比如執行查詢之前，将查詢條件做自定義特殊處理，如：界面查詢條件隻查詢年月，到後端映射為時間段查詢sqlWhere.children.forEach(r=>{if(r.field==='checkTime'){r.value=[r.value.format('yyyy-MM')+'-01 00:00:00',r.value.add(1,'month').format('yyyy-MM')+'-01 00:00:00']}})，參考附錄：【自定義查詢條件】
-
defaultSorting
預設後端查詢方法排序，如：checkTime desc,stockCheckType asc等
進階功能說明
-
表頭分頁
參照antd設定即可，如果存在自定義列顯示，且所有列都不顯示時，分組字段也不顯示
{
"title": "日期字段",
"children": [
{
"dataIndex": "dateTimeField",
"title": "日期字段",
"scopedSlots": {
"customRender": "dateTimeField"
},
"width": 160
},
{
"dataIndex": "dateField",
"title": "日期字段2",
"scopedSlots": {
"customRender": "dateField"
},
"width": 160,
"option_is": true,
"option_selected": true
}
]
}
-
自定義列顯示
在表格右上角，使用者可點選下拉勾選自定義顯示哪些字段列option_is屬性控制是否允許使用者選擇，option_selected控制預設是否勾選
{
"dataIndex": "dateField",
"title": "日期字段2",
"scopedSlots": {
"customRender": "dateField"
},
"width": 160,
"option_is": true,
"option_selected": true
}
-
是否換行顯示
在表格右上角，checkbox選擇，預設情況表格單元格内容超過展示寬度，用“...”代替，當勾選時，表格單元格内容換行顯示所有内容。
-
超連接配接字段
擴充linked屬性，點選單元格内容，可觸發事件，接入規則引擎，觸發的事件會将表格行作為事件參數傳遞到規則引擎，比如點選“合同編号”字段打開編輯合同對話框等（需要設定scopedSlots屬性）。
{
"align": "center",
"dataIndex": "stringField",
"title": "字元",
"sorter": true,
"linked": true,
"scopedSlots": {
"customRender": "stringField"
}
}
- 表格更多内容
columnsExpanded表格展開更多内容字段列定義，columnsExpandedColSpan定義展開顯示多少行，值為1-4，預設為4，表格更多列不支援option_is和option_selected屬性，支援linked屬性設定，“是否換行顯示”功能也支援
- 超出内容自動橫向滾動
表格控件設定了超出表格所有列長度時，自動出現橫向滾動條
- 其他進階功能
更多進階功能，可增加清單自定義控件，格式化顯示表格内容
個人業餘時間開發進度确實快不起來，很多設計思想我認為還是很不錯的，完全可以應用到實際項目中，後續會逐漸分解，歡迎關注。